<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <view class="engineer-page" :style="$theme.pageStyle">
        <!-- 头部导航 -->
        <view class="header-nav">
            <view class="nav-content">
                <view class="nav-left">
                    <image class="avatar" :src="userInfo.avatar || '/static/images/user/default-avatar.png'"></image>
                </view>
                <view class="nav-center">
                    <text class="title">待办订单</text>
                    <u-icon name="arrow-right" size="24" color="#fff"></u-icon>
                </view>
                <view class="nav-right">
                    <view class="message-icon">
                        <u-icon name="chat" size="48" color="#fff"></u-icon>
                        <view class="red-dot" v-if="hasNewMessage"></view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 标签栏 -->
        <view class="tab-bar">
            <view 
                class="tab-item" 
                :class="{ active: activeTab === index }"
                v-for="(tab, index) in tabs" 
                :key="index"
                @click="switchTab(index)"
            >
                <text>{{ tab }}</text>
            </view>
        </view>

        <!-- 内容区域 -->
        <view class="content-area">
            <!-- 预约提醒 -->
            <view class="appointment-notice" v-if="activeTab === 1">
                <view class="notice-content">
                    <u-icon name="sound" size="32" color="#666"></u-icon>
                    <text class="notice-text">请在2小时内预约客户，以免影响预约及时率</text>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>

            <!-- 筛选标签 -->
            <view class="filter-tabs" v-if="activeTab === 1">
                <view 
                    class="filter-tab" 
                    :class="{ active: activeFilter === index }"
                    v-for="(filter, index) in getFilterTabs()" 
                    :key="index"
                    @click="switchFilter(index)"
                >
                    <text>{{ filter }}</text>
                </view>
            </view>

            <!-- 服务中二级标签 -->
            <view class="service-tabs" v-if="activeTab === 2">
                <view 
                    class="service-tab" 
                    :class="{ active: activeFilter === index }"
                    v-for="(filter, index) in getFilterTabs()" 
                    :key="index"
                    @click="switchFilter(index)"
                >
                    <text>{{ filter }}</text>
                </view>
            </view>

            <!-- 服务提醒 -->
            <view class="service-notice" v-if="activeTab === 2">
                <view class="notice-content">
                    <u-icon name="sound" size="32" color="#666"></u-icon>
                    <text class="notice-text" v-if="activeFilter === 0">查看上门准备事项，以免影响预约达成率</text>
                    <text class="notice-text" v-else-if="activeFilter === 1">查看上门准备事项，以免影响预约达成率</text>
                    <text class="notice-text" v-else>请在预约当天完成服务，以免影响按时完成率</text>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>

            <!-- 完工/关闭二级标签 -->
            <view class="completed-tabs" v-if="activeTab === 3">
                <view 
                    class="completed-tab" 
                    :class="{ active: activeFilter === index }"
                    v-for="(filter, index) in getFilterTabs()" 
                    :key="index"
                    @click="switchFilter(index)"
                >
                    <text>{{ filter }}</text>
                </view>
            </view>

            <!-- 师傅提醒 -->
            <view class="master-notice" v-if="activeTab === 3">
                <view class="notice-content" v-if="activeFilter >0">
                  <text class="notice-text" ></text>
                  <text class="notice-text" v-if="activeFilter === 1">等待客户确认订单</text>
                  <text class="notice-text" v-if="activeFilter === 2">请师傅耐心等待下单用户打款</text>
                  <text class="notice-text" v-if="activeFilter > 2">感谢您的辛苦付出，希望继续加油！</text>
                </view>
            </view>

            <!-- 数据时间筛选 -->
<!--            <view class="data-time-filter" v-if="activeTab === 3 && activeFilter === 1">-->
<!--                <view class="time-filter-content" @click="showTimePickerModal">-->
<!--                    <text class="time-label">数据时间：</text>-->
<!--                    <text class="time-value">近3个月</text>-->
<!--                    <u-icon name="arrow-down" size="24" color="#666"></u-icon>-->
<!--                </view>-->
<!--            </view>-->

            <!-- 挂起单二级标签 -->
            <view class="suspended-tabs" v-if="activeTab === 4">
                <view 
                    class="suspended-tab" 
                    :class="{ active: activeFilter === index }"
                    v-for="(filter, index) in getFilterTabs()" 
                    :key="index"
                    @click="switchFilter(index)"
                >
                    <text>{{ filter }}</text>
                </view>
            </view>

            <!-- 挂起订单说明 -->
            <view class="suspended-notice" v-if="activeTab === 4">
                <view class="suspended-notice-content">
                    <text class="suspended-notice-text">超过3个月未处理的订单，系统会自动转为挂起订单；如有与下单用户协商一致、不再服务的订单需转为挂起订单，请通过订单右上角“…”入口操作挂起或联系客服为您处理。</text>
                    <text class="suspended-link" @click="handleSuspendHelp">如何处理挂起订单？</text>
                </view>
            </view>

            <!-- 接单订单列表 -->
            <view class="taking-order-list" v-if="activeTab === 0">
                <view class="order-card" v-for="(order, index) in takingOrders" :key="index">
                    <!-- 订单头部 -->
                    <view class="order-header">
                        <view class="service-title">
                            <text class="title-text">{{ order.title }}</text>
                            <view class="urgent-tag" v-if="order.isUrgent">
                                <text class="urgent-text">加急</text>
                            </view>
                        </view>
                        <view class="order-price">
                            <text class="price-symbol">¥</text>
                            <text class="price-amount">{{ order.price }}</text>
                        </view>
                    </view>
                    
                    <!-- 订单信息 -->
                    <view class="order-info">
                        <view class="info-item">
                            <text class="info-label">服务内容</text>
                            <text class="info-value">{{ order.content }}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">服务地址</text>
                            <text class="info-value">{{ order.address }}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">距离</text>
                            <text class="info-value distance">{{ order.distance }}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-label">服务时间</text>
                            <view class="time-info">
<!--                                <text class="time-date" :class="{ today: order.timeType === 'today', tomorrow: order.timeType === 'tomorrow' }">{{ order.timeText }}</text>-->
                                <text class="time-period">{{ order.startDateTime }}~{{ order.endDateTime }}</text>
                            </view>
                        </view>
                        <view class="info-item">
                            <text class="info-label">服务标签</text>
                            <view class="service-tags">
                                <text class="service-tag" v-for="tag in order.tags" :key="tag">{{ tag }}</text>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 操作按钮 -->
                    <view class="order-actions">
                        <button class="ignore-btn" @click="ignoreOrder(order)">忽略</button>
                        <button class="take-btn" @click="takeOrder(order)">立即接单</button>
                    </view>
                </view>
                
                <!-- 加载更多 -->
                <view class="load-more" v-if="takingOrdersPagination.hasMore" @click="loadMoreTakingOrders">
                    <text>{{ loadingMore ? '正在加载...' : '点击加载更多' }}</text>
                </view>
                <!-- 空状态 -->
                <view class="empty-taking-orders" v-if="takingOrders.length === 0">
                    <image class="empty-icon" src="/static/images/empty/goods.png"></image>
                    <text class="empty-text">暂无可接订单</text>
                    <text class="empty-desc">完成入驻后，平台将为您推送订单</text>
                </view>
            </view>

            <!-- 待预约订单列表 -->
            <view class="appointment-order-list" v-if="activeTab === 1 && hasAppointments">
                <view class="appointment-card" v-for="(order, index) in appointmentOrders" :key="index">
                    <!-- 订单头部 -->
                    <view class="appointment-header">
                        <view class="service-title">
                            <text class="title-text">{{ order.title }}</text>
                        </view>
                        <view class="deadline-text" :class="{ urgent: order.type === 'urgent' }">
                            <text>待预约</text>
                        </view>
                    </view>
                    
                    <!-- 订单信息 -->
                    <view class="appointment-info">
                        <view class="info-item">
                            <u-icon name="map-pin" size="32" color="#666"></u-icon>
                            <text class="info-text">{{ order.address }}</text>
                        </view>
<!--                        <view class="info-item">-->
<!--                            <u-icon name="clock" size="32" color="#666"></u-icon>-->
<!--                            <text class="info-label">期望时间:</text>-->
<!--                            <text class="info-text">{{ order.appointmentTime }}</text>-->
<!--                        </view>-->
                      <view class="info-item">
                        <u-icon name="clock" size="32" color="#666"></u-icon>
                        <text class="info-label">开始时间:</text>
                        <view class="time-picker" @click="openStartTimePicker(order)">
                          <text class="selected-time" v-if="order.selectedStartTime">{{ order.selectedStartTime }}</text>
                          <text class="placeholder" v-else>请选择开始时间</text>
                          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                        </view>
                      </view>

                      <view class="info-item">
                        <u-icon name="clock" size="32" color="#666"></u-icon>
                        <text class="info-label">结束时间:</text>
                        <view class="time-picker" @click="openEndTimePicker(order)">
                          <text class="selected-time" v-if="order.selectedEndTime">{{ order.selectedEndTime }}</text>
                          <text class="placeholder" v-else :class="{ disabled: !order.selectedStartTime }">请选择结束时间</text>
                          <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                        </view>
                      </view>

                      <view class="info-item">
                            <u-icon name="rmb-circle" size="32" color="#666"></u-icon>
                            <text class="info-label">服务费:</text>
                            <text class="price-text">￥{{ order.price }}</text>
                        </view>
                        <!-- 标签 -->
                        <view class="service-tags">
                            <text class="service-tag" :class="{ urgent: tag === '加急', new: tag === '新客户' }" v-for="tag in order.tags" :key="tag">{{ tag }}</text>
                        </view>
                    </view>
                    
                    <!-- 操作按钮 -->
                    <view class="appointment-actions" >
                        <button class="appointment-btn" @click="makeAppointment(order)">立即预约</button>
                    </view>

                </view>
                
                <!-- 加载更多 -->
                <view class="load-more" v-if="appointmentOrdersPagination.hasMore" @click="loadMoreAppointmentOrders">
                    <text>{{ loadingMoreAppointment ? '正在加载...' : '点击加载更多' }}</text>
                </view>
            </view>

            <!-- 待预约空状态 -->
            <view class="appointment-empty" v-if="activeTab === 1 && !hasAppointments">
                <view class="empty-appointment">
                    <image class="appointment-icon" src="/static/images/empty/search.png"></image>
                    <text class="empty-appointment-text" v-if="activeFilter === 0">暂无待预约客户订单</text>
                    <text class="empty-appointment-text" v-else-if="activeFilter === 1">暂无立即预约单</text>
                    <text class="empty-appointment-text" v-else-if="activeFilter === 2">暂无超时单</text>
                    <text class="empty-appointment-text" v-else-if="activeFilter === 3">暂无待确认上门单</text>
                    <text class="empty-appointment-text" v-else>暂无未到货单</text>
                    
                    <!-- 立即预约的说明 -->
                    <text class="appointment-description" v-if="activeFilter === 1">指的是您需要在2小时内预约的订单，还未超时</text>
                    
                    <!-- 已超时的说明 -->
                    <text class="appointment-description" v-else-if="activeFilter === 2">指的是预约超时的订单，需要尽快完成预约</text>
                    
                    <!-- 预约失败的说明 -->
                    <text class="appointment-description" v-else-if="activeFilter === 3">指的是已联系过客户，未确定上门时间的单需尽快再次预约</text>
                    
                    <!-- 未到货的说明 -->
                    <text class="appointment-description" v-else-if="activeFilter === 4">指的是配送类订单，需要等到货后再和客户预约上门时间；非配送类，需在接单后立即预约。</text>
                </view>
            </view>

            <!-- 服务中空状态 -->
            <view class="service-empty" v-if="activeTab === 2 && !hasServiceOrders">
                <view class="empty-service">
                    <image class="service-icon" src="/static/images/empty/search.png"></image>
                    <text class="empty-service-text" v-if="activeFilter === 0">暂无待提货订单~</text>
                    <text class="empty-service-text" v-else-if="activeFilter === 1">暂无待上门订单</text>
                    <text class="empty-service-text" v-else>暂无待完成订单~</text>
                </view>
            </view>

            <!-- 服务中订单列表 -->
            <view class="service-order-list" v-if="activeTab === 2 && hasServiceOrders && activeFilter === 0">
                <view class="service-card" v-for="(order, index) in serviceOrders" :key="index">
                    <!-- 订单头部 -->
                    <view class="service-header">
                        <view class="service-title">
                            <text class="title-text">{{ order.title }}</text>
                        </view>
                      <view class="service-status" :class="getActionStatus(order.status).type">
                        <text class="status-text">{{ getActionStatus(order.serviceProgress.status).text }}</text>
                      </view>
                    </view>
                    
                    <!-- 订单基本信息 -->
                    <view class="service-basic-info">
                        <view class="info-item">
                            <u-icon name="map-pin" size="28" color="#666"></u-icon>
                            <text class="info-text">{{ order.address }}</text>
                        </view>
                        <view class="info-item">
                            <u-icon name="clock" size="28" color="#666"></u-icon>
                            <text class="info-label">预约时间:</text>
                            <text class="info-text">{{ order.originalTime }}</text>
                        </view>
                        <view class="info-item">
                            <u-icon name="rmb-circle" size="28" color="#666"></u-icon>
                            <text class="info-label">服务费:</text>
                            <text class="price-text">￥{{ order.price }}</text>
                        </view>
                        <!-- 标签 -->
                        <view class="service-tags">
                            <text class="service-tag" :class="{ urgent: tag.includes('加急'), vip: tag.includes('VIP') }" v-for="tag in order.tags" :key="tag">{{ tag }}</text>
                        </view>
                    </view>
                    
                    <!-- 服务进度 -->
                    <view class="service-progress">
                        <text class="progress-title">服务进度</text>
                        <view class="progress-steps">
                            <view class="progress-step" v-for="(step, stepIndex) in order.serviceProgress.steps" :key="stepIndex" :class="{ completed: step.status === 'completed', current: step.status === 'current', pending: step.status === 'pending' }">
                                <view class="step-icon">
                                    <u-icon v-if="step.status === 'completed'" name="checkmark" size="20" color="#fff"></u-icon>
                                    <u-icon v-else-if="step.status === 'current'" name="star" size="20" color="#fff"></u-icon>
                                    <view v-else class="pending-dot"></view>
                                </view>
                                <text class="step-name">{{ step.name }}</text>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 操作区域 -->
                  <!-- 替换原有的 service-actions 部分 -->
                  <view class="service-actions">
<!--                    <input class="service-note" placeholder="请填写服务备注" v-model="order.serviceNote" />-->
                    <button
                        v-if="getServiceActionButton(order)"
                        class="dynamic-action-btn"
                        @click="getServiceActionButton(order)?.action"
                    >
                      <u-icon name="checkmark" size="24" color="#fff"></u-icon>
                      <text>{{ getServiceActionButton(order)?.text }}</text>
                    </button>
                    <!-- 当状态为"已完成"时，不显示按钮 -->
                    <view v-else class="service-completed">
                      <text class="completed-text">服务已完成</text>
                    </view>
                  </view>


                  <!-- 客户信息 -->
                    <view class="customer-info">
                        <text class="customer-title">客户信息</text>
                        <view class="customer-detail">
                            <view class="customer-profile">
                                <view class="customer-avatar">
                                    <u-icon name="account" size="40" color="#00bcd4"></u-icon>
                                </view>
                                <view class="customer-name-rating">
                                    <text class="customer-name">{{ order.customer.name }}</text>
                                    <view class="customer-rating">
                                        <u-icon v-for="n in 5" :key="n" :name="n <= Math.floor(order.customer.rating) ? 'star-fill' : (n === Math.ceil(order.customer.rating) && order.customer.rating % 1 !== 0 ? 'star-half' : 'star')" size="20" :color="n <= order.customer.rating ? '#ffb400' : '#e0e0e0'"></u-icon>
                                        <text class="rating-text">{{ order.customer.rating }}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="customer-actions">
                                <button class="customer-action-btn" @click="callCustomer(order.customer)">
                                    <u-icon name="phone" size="20" color="#666"></u-icon>
                                    <text>拨打电话</text>
                                </button>
                                <button class="customer-action-btn" @click="sendMessage(order.customer)">
                                    <u-icon name="chat" size="20" color="#666"></u-icon>
                                    <text>发送消息</text>
                                </button>
                                <button class="customer-action-btn" @click="navigateToCustomer(order)">
                                    <u-icon name="map" size="20" color="#666"></u-icon>
                                    <text>导航地址</text>
                                </button>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 服务详情 -->
                    <view class="service-details">
                        <text class="details-title">服务详情</text>
                        <view class="details-content">
                            <view class="detail-item">
                                <text class="detail-label">订单编号</text>
                                <text class="detail-value">{{ order.orderNumber }}</text>
                            </view>
                            <view class="detail-item">
                                <text class="detail-label">服务类型</text>
                                <text class="detail-value">{{ order.serviceDetails.serviceType }}</text>
                            </view>
                            <view class="detail-item">
                                <text class="detail-label">预约时间</text>
                                <text class="detail-value">{{ order.serviceDetails.scheduledTime }}</text>
                            </view>
                            <view class="detail-item">
                                <text class="detail-label">服务地址</text>
                                <text class="detail-value">{{ order.serviceDetails.serviceLocation }}</text>
                            </view>
                            <view class="detail-item">
                                <text class="detail-label">客户备注</text>
                                <text class="detail-value">{{ order.serviceDetails.customerNote }}</text>
                            </view>
                            <view class="detail-item">
                                <text class="detail-label">服务费用</text>
                                <text class="detail-value price">￥{{ order.serviceDetails.serviceFee }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 加载更多 -->
                <view class="load-more" v-if="serviceOrdersPagination.hasMore" @click="loadMoreServiceOrders">
                    <text>{{ loadingMoreService ? '正在加载...' : '点击加载更多' }}</text>
                </view>
            </view>

            <!-- 完工/关闭订单列表 -->
            <view class="completed-order-list" v-if="activeTab === 3 && hasCompletedOrders">
                <view class="completed-card" v-for="(order, index) in completedOrders" :key="index">
                    <!-- 服务完成状态 -->
                    <view class="completion-status" v-if="order.status===6">
                        <view class="status-icon">
                            <view class="success-circle">
                                <u-icon name="checkmark" size="32" color="#fff"></u-icon>
                            </view>
                        </view>
                        <view class="status-content">
                          <text class="status-title">服务已完成</text>
                          <text class="status-desc">客户已确认服务完成，感谢您的专业服务！</text>
                          <text class="completion-time">完成时间：{{ order.completedTime }}</text>
                        </view>
                    </view>
                  <view class="completion-status" v-if="order.status===4">
                    <view class="status-content">
                      <text class="status-title">待客户确认</text>
                    </view>
                  </view>
                  <view class="completion-status" v-if="order.status===5">
                    <view class="status-content">
                      <!-- 确认收款按钮 -->
                      <button class="confirm-payment-btn" @click="openConfirmPaymentModal(order)">确认收款</button>
                    </view>
                  </view>
                    <!-- 订单信息 -->
                    <view class="completed-order-info">
                        <view class="order-header">
                            <text class="order-title">{{ order.title }}</text>
                            <text class="order-price">￥{{ order.price }}</text>
                        </view>
                        
                        <view class="order-details">
                            <view class="detail-item">
                                <u-icon name="map-pin" size="24" color="#666"></u-icon>
                                <text class="detail-text">{{ order.address }}</text>
                            </view>
                            <view class="detail-item">
                                <u-icon name="clock" size="24" color="#666"></u-icon>
                                <text class="detail-label">服务时间:</text>
                                <text class="detail-text">{{ order.serviceTime }}</text>
                            </view>
                            <view class="detail-item">
                                <u-icon name="list" size="24" color="#666"></u-icon>
                                <text class="detail-label">订单编号:</text>
                                <text class="detail-text">{{ order.orderNumber }}</text>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 客户评价 -->
                    <view class="customer-review">
                        <text class="review-title">客户评价</text>
                        <view class="review-content">
                            <text class="review-text">{{ order.customerReview.content }}</text>
                            <view class="review-rating">
                                <u-icon v-for="n in 5" :key="n" name="star-fill" size="24" :color="n <= order.customerReview.rating ? '#ffb400' : '#e0e0e0'"></u-icon>
                                <text class="rating-score">{{ order.customerReview.rating }}分</text>
                            </view>
                        </view>
                    </view>
                    
                    <!-- 操作按钮 -->
                    <view class="completed-actions">
                        <button class="rebook-btn" @click="rebookService(order)">
                            <u-icon name="reload" size="20" color="#666"></u-icon>
                            <text>再次服务</text>
                        </button>
                        <button class="view-details-btn" @click="viewOrderDetails(order)">
                            <u-icon name="list" size="20" color="#fff"></u-icon>
                            <text>查看详情</text>
                        </button>
                    </view>
                    
                    <!-- 订单记录 -->
                    <view class="order-timeline">
                        <text class="timeline-title">订单记录</text>
                        <view class="timeline-content">
                            <view class="timeline-item" v-for="(record, recordIndex) in order.orderTimeline" :key="recordIndex">
                                <text class="timeline-action">{{ record.action }}</text>
                                <text class="timeline-time">{{ record.time }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 加载更多 -->
                <view class="load-more" v-if="completedOrdersPagination.hasMore" @click="loadMoreCompletedOrders">
                    <text>{{ loadingMoreCompleted ? '正在加载...' : '点击加载更多' }}</text>
                </view>
            </view>

            <!-- 完工/关闭空状态 -->
            <view class="completed-empty" v-if="activeTab === 3 && !hasCompletedOrders">
                <view class="empty-completed">
                    <image class="completed-icon" src="/static/images/empty/search.png"></image>
                    <text class="empty-completed-text" v-if="activeFilter === 0">暂无待收款订单~</text>
                    <text class="empty-completed-text" v-else-if="activeFilter === 1">暂无交易成功订单~</text>
                    <text class="empty-completed-text" v-else>暂无交易关闭订单~</text>
                </view>
            </view>

            <!-- 挂起单订单列表 -->
            <view class="suspended-order-list" v-if="activeTab === 4 && hasSuspendedOrders && activeFilter === 0">
                <view class="suspended-card" v-for="(order, index) in suspendedOrders" :key="index">
                    <!-- 订单头部 -->
                    <view class="suspended-header">
                        <view class="service-title">
                            <text class="title-text">{{ order.title }}</text>
                        </view>
                        <view class="suspended-status" :class="{ waiting: order.statusType === 'waiting', customer: order.statusType === 'customer', other: order.statusType === 'other' }">
                            <text class="status-text">{{ order.status }}</text>
                        </view>
                    </view>
                    
                    <!-- 订单信息 -->
                    <view class="suspended-info">
                        <view class="info-item">
                            <u-icon name="map-pin" size="28" color="#666"></u-icon>
                            <text class="info-text">{{ order.address }}</text>
                        </view>
                        <view class="info-item">
                            <u-icon name="clock" size="28" color="#666"></u-icon>
                            <text class="info-label">原定时间:</text>
                            <text class="info-text">{{ order.originalTime }}</text>
                        </view>
                        <view class="info-item">
                            <u-icon name="rmb-circle" size="28" color="#666"></u-icon>
                            <text class="info-label">服务费:</text>
                            <text class="price-text">￥{{ order.price }}</text>
                        </view>
                        <view class="info-item">
                            <u-icon name="info-circle" size="28" color="#666"></u-icon>
                            <text class="info-label">挂起原因:</text>
                            <text class="reason-text">{{ order.suspendReason }}</text>
                        </view>
                        <text class="suspend-time">挂起时间：{{ order.suspendTime }}</text>
                    </view>
                    
                    <!-- 操作按钮 -->
                    <view class="suspended-actions">
                        <button class="cancel-suspend-btn" @click="cancelSuspend(order)">取消挂起</button>
                        <button class="restore-service-btn" @click="restoreService(order)">恢复服务</button>
                    </view>
                </view>
            </view>

            <!-- 挂起单空状态 -->
            <view class="suspended-empty" v-if="activeTab === 4 && !hasSuspendedOrders">
                <view class="empty-suspended">
                    <image class="suspended-icon" src="/static/images/empty/search.png"></image>
                    <text class="empty-suspended-text">暂无挂起订单 ~</text>
                </view>
            </view>

            <!-- 其他标签页空状态 -->
            <view class="general-empty" v-if="activeTab > 4 && !hasData">
                <view class="empty-general">
                    <image class="general-icon" src="/static/images/empty/goods.png"></image>
                    <text class="empty-general-text">暂无相关订单</text>
                </view>
            </view>

            <!-- 订单列表 -->
            <view class="order-list" v-if="hasOrders || hasAppointments || hasServiceOrders || hasCompletedOrders || hasSuspendedOrders || hasData">
                <!-- 这里可以放订单列表内容 -->
            </view>
        </view>

        <!-- 底部认证提示 -->
<!--        <view class="bottom-notice" @click="goToVerification">
            <text>请继续完成实名认证</text>
            <u-icon name="arrow-right" size="24" color="#fff"></u-icon>
        </view>-->


        <!-- 入驻弹窗 -->
        <u-popup v-model="showJoinPopup" mode="center" border-radius="20" width="640rpx">
            <view class="join-modal">
                <view class="modal-header">
                    <text class="modal-title">师傅入驻申请</text>
                    <u-icon name="close" size="32" @click="showJoinPopup = false"></u-icon>
                </view>
                <view class="modal-content">
                    <view class="form-item">
                        <text class="label">真实姓名</text>
                        <input class="input" v-model="formData.realName" placeholder="请输入您的真实姓名" />
                    </view>
                    <view class="form-item">
                        <text class="label">手机号码</text>
                        <input class="input" v-model="formData.mobile" placeholder="请输入手机号码" />
                    </view>
                    <view class="form-item">
                        <text class="label">现住省份</text>
                        <view class="region-select" @click="showRegionPickerModal">
                            <text v-if="!formData.formatRegion" class="placeholder">请选择省市区</text>
                            <text v-else>{{ formData.formatRegion }}</text>
                            <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                        </view>
                    </view>
                    <view class="form-item">
                        <text class="label">申请原因</text>
                        <textarea class="textarea" v-model="formData.reason" placeholder="请输入申请原因"></textarea>
                    </view>
                </view>
                <view class="modal-footer">
                    <button class="submit-btn" @click="submitApplication">提交申请</button>
                    <view class="agreement" v-if="showAgreement">
                        <u-checkbox v-model="agreeTerms" shape="circle">
                            <text>我已阅读并同意</text>
                            <text class="link" @click.stop="viewAgreement">《师傅入驻协议》</text>
                        </u-checkbox>
                    </view>
                </view>
            </view>
        </u-popup>

        <!-- 确认收款弹窗 -->
        <u-popup v-model="showConfirmPaymentPopup" mode="center" border-radius="20" width="640rpx">
            <view class="confirm-payment-modal">
                <view class="modal-header">
                    <text class="modal-title">确认收款</text>
                    <u-icon name="close" size="32" @click="showConfirmPaymentPopup = false"></u-icon>
                </view>
                <view class="modal-content">

                    <view class="form-item">
                        <text class="label">收款金额</text>
                        <input class="input" v-model="confirmPaymentAmount" placeholder="请输入收款金额" />
                    </view>
                    <view class="form-item">
                        <text class="description" style="color: red;font-weight: 800">线下支付金额，不填写，默认为订单金额</text>
                    </view>
                </view>
                <view class="modal-footer">
                    <button class="cancel-btn" @click="showConfirmPaymentPopup = false">取消</button>
                    <button class="confirm-btn" @click="confirmPayment">确定</button>
                </view>
            </view>
        </u-popup>

        <!-- 地区选择器 -->
        <u-picker v-model="showRegionPicker" mode="region" @confirm="onRegionConfirm"></u-picker>

      <!-- 图片上传弹窗 -->
      <u-popup v-model="showImageUploadModal" mode="center" border-radius="20" width="640rpx" @close="cancelCompleteService">
        <view class="image-upload-modal">
          <view class="modal-header">
            <text class="modal-title">完成服务</text>
            <u-icon name="close" size="32" @click="cancelCompleteService"></u-icon>
          </view>

          <view class="modal-content">
            <view class="image-upload-area">
<!--
              <view class="uploaded-images" v-if="tempImageUrls.length > 0">
                <view class="image-item" v-for="(url, index) in tempImageUrls" :key="index">
                  <image class="uploaded-image" :src="url" mode="aspectFill"></image>
                  <u-icon name="close" size="24" class="remove-icon" @click="removeImage(index)"></u-icon>
                </view>
              </view>
-->
              <view class="uploaded-images" v-if="tempImageUrls.length > 0">
                <view class="image-item" v-for="(url, index) in tempImageUrls" :key="index">
                  <image
                      class="uploaded-image"
                      :src="url"
                      mode="aspectFill"
                      @click="previewImage(index)"
                  ></image>
                  <u-icon name="close" size="24" class="remove-icon" @click="removeImage(index)"></u-icon>
                </view>
              </view>
              <!-- 上传按钮 - 仅在未达到最大图片数时显示 -->
              <view class="upload-button" @click="handleImageUpload" v-if="tempImageUrls.length < maxImages">
                <u-icon name="plus" size="48" color="#999"></u-icon>
                <text class="upload-text">添加图片</text>
              </view>

              <!-- 图片数量提示 -->
              <view class="image-count" v-if="tempImageUrls.length > 0">
                <text>已选 {{ tempImageUrls.length }} 张图片</text>
                <text v-if="maxImages - tempImageUrls.length > 0">，还可添加 {{ maxImages - tempImageUrls.length }} 张</text>
              </view>
            </view>
          </view>

          <view class="modal-footer">
            <button class="cancel-btn" @click="cancelCompleteService">取消</button>
            <button class="confirm-btn" @click="confirmCompleteService">确认完成</button>
          </view>
        </view>
      </u-popup>
      <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { orderedLists } from '@/api/order'
import { add ,orderAcceptLists,appointment,orderRservedLists,completedLists,receivePayment} from '@/api/order/orderaccept'
import { addOrderAcceptDdetails} from '@/api/order/orderacceptdetails'

import { applyDistribution, applyDetial } from '@/api/engineer'
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import { useRouter } from 'uniapp-router-next'
import {uploadImage} from "@/api/upload/upload";

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 标签页数据
const tabs = ref(['接单', '待预约', '服务中', '完工/关闭', '挂起'])
const activeTab = ref(0)

// 页面状态
const hasOrders = ref(false) // 是否有订单
const hasAppointments = ref(true) // 是否有预约（设为true显示订单列表）
const hasServiceOrders = ref(true) // 是否有服务中订单（设为true显示订单列表）
const hasCompletedOrders = ref(true) // 是否有完工订单（设为true显示订单列表）
const hasSuspendedOrders = ref(true) // 是否有挂起订单（设为true显示订单列表）
const hasData = ref(false) // 是否有其他数据
const hasNewMessage = ref(true) // 是否有新消息
const showJoinPopup = ref(false) // 显示入驻弹窗
const showRegionPicker = ref(false) // 显示地区选择器
const showAgreement = ref(true) // 是否显示协议
const agreeTerms = ref(false) // 是否同意协议

// 筛选标签
const filterTabs = ref([
    ['全部', '立即预约', '已超时', '预约失败'], // 待预约的筛选选项
    ['待提货', '待上门', '待完成'], // 服务中的筛选选项
    ['全部', '客户确认', '待收款', '交易成功', '交易关闭'], // 完工/关闭的筛选选项
    ['待预约', '待提货', '待上门', '待确认'] // 挂起单的筛选选项
])
const activeFilter = ref(0) // 当前筛选标签

// 表单数据
const formData = ref({
    realName: '',
    mobile: '',
    province: '',
    city: '',
    district: '',
    formatRegion: '',
    reason: ''
})

// 挂起订单数据
const suspendedOrders = ref([
   /* {
        id: 1,
        title: '家电维修 - 空调维修',
        status: '等待配件',
        statusType: 'waiting',
        price: 200,
        address: '北京市朝阳区建国门外大街1号国贸大厦',
        originalTime: '2025-10-16 14:00-16:00-2025-10-17 14:00-16:00',
        serviceFee: 200,
        suspendReason: '等待空调压缩机配件到货',
        suspendTime: '2023-09-15 13:30'
    },
    {
        id: 2,
        title: '家具安装 - 定制衣柜',
        status: '客户原因',
        statusType: 'customer',
        price: 350,
        address: '上海市浦东新区陆家嘴环路1000号',
        originalTime: '2023-09-16 全天',
        serviceFee: 350,
        suspendReason: '客户临时出差，要求延期一周',
        suspendTime: '2023-09-15 10:15'
    },
    {
        id: 3,
        title: '防水补漏 - 卫生间防水',
        status: '其他原因',
        statusType: 'other',

    }*/
])

// 完工订单数据
const completedOrders = ref([
  /*  {
        id: 1, title: '家电维修 - 空调清洗', orderNumber: 'WSF20230915001', status: 5, // 5表示待收款状态price: 120,
        address: '北京市朝阳区建国门外大街1号国贸大厦B座1506室', serviceTime: '2023-09-15 14:00-16:00', completedTime: '2023-09-15 15:30',
        customerReview: {
            content: '师傅服务非常专业，空调清洗得很干净，还帮我检查了制冷问题，态度也很好，非常感谢！',
            rating: 5.0,
            time: '2023-09-15 15:30'
        }, orderTimeline: [
            { action: '客户确认完成', time: '2023-09-15 15:30' }, { action: '您提交了服务完成', time: '2023-09-15 15:20' }, { action: '开始服务', time: '2023-09-15 14:05' }, { action: '到达服务地点', time: '2023-09-15 13:55' },{ action: '接单成功', time: '2023-09-14 10:30' }]
    }*/
])

// 确认收款相关数据
const showConfirmPaymentPopup = ref(false);
const confirmPaymentOrder = ref<any>(null);
const confirmPaymentAmount = ref('');

// 完工订单分页数据
const completedOrdersPagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  hasMore: true
})

// 待预约订单分页数据
const appointmentOrdersPagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  hasMore: true
})

// 服务中订单分页数据
const serviceOrdersPagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  hasMore: true
})

// 加载状态
const loadingMoreCompleted = ref(false);
const loadingMoreAppointment = ref(false);
const loadingMoreService = ref(false);

// 服务中订单数据
const serviceOrders = ref([
    {
        id: 1,
        title: '家电维修 - 空调清洗',
        orderNumber: 'WSF20230915001',
        status: '服务中',
        price: 120,
        address: '北京市朝阳区建国门外大街1号国贸大厦B座1506室',
        originalTime: '2025-10-16 14:00-16:00-2025-10-17 14:00-16:00',
        tags: ['加急订单', 'VIP客户'],
        serviceNote: '', // 服务备注
        serviceProgress: {
            steps: [
                { name: '已预约', status: 'completed' },
                { name: '已出发', status: 'completed' },
                { name: '到达地点', status: 'completed' },
                { name: '服务中', status: 'current' },
                { name: '已完成', status: 'pending' }
            ]
        },
        customer: {
            name: '张先生',
            rating: 4.8,
            phone: '138****8888'
        },
        serviceDetails: {
            serviceType: '家电维修 - 空调清洗',
            scheduledTime: '2023-09-15 14:00-16:00',
            serviceLocation: '北京市朝阳区建国门外大街1号国贸大厦B座1506室',
            customerNote: '空调制冷效果不好，需要全面清洗和检查',
            serviceFee: 120
        }
    }
])

// 待预约订单数据
const appointmentOrders = ref([
    {
        id: 1,
        title: '家电维修 - 空调清洗',
        isUrgent: true,
        price: 120,
        address: '北京市朝阳区建国门外大街1号国贸大厦',
        originalTime: '2025-10-16 14:00-16:00-2025-10-17 14:00-16:00',
        deadlineText: '需在今日 18:00 前预约',
        tags: ['加急', '新客户'],
        type: 'urgent'
    },
    {
        id: 2,
        title: '管道清洁 - 马桶疏通',
        isUrgent: false,
        price: 280,
        address: '上海市浦东新区陆家嘴环路1000号',
        appointmentTime: '09月15日 全天',
        deadlineText: '需在09月14日前预约',
        tags: ['新客户'],
        type: 'normal'
    },
    {
        id: 3,
        title: '防水补漏 - 卫生间防水',
        isUrgent: true,
        price: 350,
        address: '广州市天河区天河路200号',
        appointmentTime: '09月14日 10:00-12:00',
        deadlineText: '需在09月13日前预约',
        tags: ['加急'],
        type: 'urgent'
    }
])

// 接单订单数据
const takingOrders = ref([
   /* {
        id: 1,
        title: '家具安装',
        isUrgent: true,
        price: 120,
        content: '衣柜安装（2米宽）',
        address: '朝阳区建国路88号SOHO现代城C座1205室',
        distance: '3.5km',
        timeType: 'today',
        timeText: '今天',
        timePeriod: '2025-10-16 14:00-16:00-2025-10-17 14:00-16:00',
        tags: ['家具安装', '衣柜', '加急单']
    },
    {
        id: 2,
        title: '空调维修',
        isUrgent: false,
        price: 200,
        content: '空调不制冷检测维修',
        address: '',
        distance: '5.2km',
        timeType: 'today',
        timeText: '今天',
        timePeriod: '随时可上门',
        tags: ['家电维修', '空调']
    },
    {
        id: 3,
        title: '灯具安装',
        isUrgent: false,
        price: 80,
        content: '客厅吊灯安装（黑白带箅子）',
        address: '丰台区西四环南路88号',
        distance: '2.1km',
        timeType: 'tomorrow',
        timeText: '明天',
        timePeriod: '10:00-12:00',
        tags: ['灯具安装', '吊灯']
    },
    {
        id: 4,
        title: '沙发配送安装',
        isUrgent: false,
        price: 150,
        content: '3人位沙发配送并安装',
        address: '东城区东直门内大街288号',
        distance: '4.7km',
        timeType: 'after',
        timeText: '后天',
        timePeriod: '13:00-15:00',
        tags: ['家具配送', '安装', '大件']
    }*/
])

// 分页相关数据
const takingOrdersPagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
  hasMore: true
})

// 加载状态
const loadingMore = ref(false);

// 加载更多接单订单
const loadMoreTakingOrders = () => {
  console.log('尝试加载更多数据:', takingOrdersPagination.value); // 调试信息
  
  if (takingOrdersPagination.value.hasMore && !loadingMore.value) {
    loadingMore.value = true;
    console.log('开始加载第', takingOrdersPagination.value.pageNo + 1, '页'); // 调试信息
    queryList(
      takingOrdersPagination.value.pageNo + 1,
      takingOrdersPagination.value.pageSize
    ).finally(() => {
      loadingMore.value = false;
    });
  } else if (loadingMore.value) {
    uni.showToast({
      title: '正在加载中...',
      icon: 'none'
    });
  } else {
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none'
    });
  }
};

// 加载更多待预约订单
const loadMoreAppointmentOrders = () => {
  if (appointmentOrdersPagination.value.hasMore && !loadingMoreAppointment.value) {
    loadingMoreAppointment.value = true;
    orderAcceptList(
      appointmentOrdersPagination.value.pageNo + 1,
      appointmentOrdersPagination.value.pageSize
    ).finally(() => {
      loadingMoreAppointment.value = false;
    });
  } else if (loadingMoreAppointment.value) {
    uni.showToast({
      title: '正在加载中...',
      icon: 'none'
    });
  } else {
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none'
    });
  }
};

// 加载更多服务中订单
const loadMoreServiceOrders = () => {
  if (serviceOrdersPagination.value.hasMore && !loadingMoreService.value) {
    loadingMoreService.value = true;
    orderRservedList(
      serviceOrdersPagination.value.pageNo + 1,
      serviceOrdersPagination.value.pageSize
    ).finally(() => {
      loadingMoreService.value = false;
    });
  } else if (loadingMoreService.value) {
    uni.showToast({
      title: '正在加载中...',
      icon: 'none'
    });
  } else {
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none'
    });
  }
};

// 加载更多完工订单
const loadMoreCompletedOrders = () => {
  if (completedOrdersPagination.value.hasMore && !loadingMoreCompleted.value) {
    loadingMoreCompleted.value = true;
    completedList(
      completedOrdersPagination.value.pageNo + 1,
      completedOrdersPagination.value.pageSize
    ).finally(() => {
      loadingMoreCompleted.value = false;
    });
  } else if (loadingMoreCompleted.value) {
    uni.showToast({
      title: '正在加载中...',
      icon: 'none'
    });
  } else {
    uni.showToast({
      title: '没有更多数据了',
      icon: 'none'
    });
  }
};

// 获取当前标签页的筛选选项
const getFilterTabs = () => {
    if (activeTab.value === 1) {
        // return filterTabs.value[0] // 待预约的筛选选项
    } else if (activeTab.value === 2) {
        // return filterTabs.value[1] // 服务中的筛选选选项
    } else if (activeTab.value === 3) {
     // ['全部','待收款', '交易成功', '交易关闭'], // 完工/关闭的筛选选项
        return filterTabs.value[2] // 完工/关闭的筛选选项
    } else if (activeTab.value === 4) {
        return filterTabs.value[3] // 挂起单的筛选选项
    }
    return []
}

// 切换标签
const switchTab = (index: number) => {
    activeTab.value = index
    // 重置筛选标签
    activeFilter.value = 0
    // 这里可以加载对应标签的数据
    loadTabData(index)
}

// 切换筛选标签
const switchFilter = (index: number) => {
    activeFilter.value = index
    // 根据筛选条件加载数据
    loadFilterData(index)
}

// 加载标签数据
// 加载标签数据
const loadTabData = (tabIndex: number) => {
    switch (tabIndex) {
        case 0: // 接单
            // 加载接单数据
            queryList(1, 10)
            break
        case 1: // 待预约
            // 加载待预约数据
          orderAcceptList(1,10)

          break
        case 2: // 服务中
            // 加载服务中数据
          orderRservedList(1,10)

          break
        case 3: // 完工/关闭
            // 加载完工数据
          completedList(1,10)

          break
        case 4: // 挂起
            // 加载挂起数据
            break
    }
}

// 加载筛选数据
const loadFilterData = (filterIndex: number) => {
    // 根据筛选条件加载对应数据
    const currentFilters = getFilterTabs()
    if (currentFilters.length > 0) {
        console.log('加载筛选数据:', currentFilters[filterIndex])
    }
    
    // 根据当前标签和筛选条件加载数据
    if (activeTab.value === 3) {
        // 完工/关闭标签，重新加载数据
        completedList(1, 10);
    }
}

// 显示入驻弹窗
const showJoinModal = () => {
    showJoinPopup.value = true
}

// 显示地区选择器
const showRegionPickerModal = () => {
    showRegionPicker.value = true
}

// 地区选择确认
const onRegionConfirm = (region: any) => {
    formData.value.province = region.province.code
    formData.value.city = region.city.code
    formData.value.district = region.area.code
    formData.value.formatRegion = `${region.province.name}/${region.city.name}/${region.area.name}`
}

// 提交申请
const submitApplication = async () => {
    if (!formData.value.realName) {
        uni.showToast({ title: '请输入真实姓名', icon: 'none' })
        return
    }
    if (!formData.value.mobile) {
        uni.showToast({ title: '请输入手机号码', icon: 'none' })
        return
    }
    if (!formData.value.province) {
        uni.showToast({ title: '请选择现住省份', icon: 'none' })
        return
    }
    if (!formData.value.reason) {
        uni.showToast({ title: '请输入申请原因', icon: 'none' })
        return
    }
    if (showAgreement.value && !agreeTerms.value) {
        uni.showToast({ title: '请先同意入驻协议', icon: 'none' })
        return
    }

    try {
        uni.showLoading({ title: '提交中...' })
        /*await applyDistribution({
            ...formData.value, 
            agree: agreeTerms.value ? 1 : 0 
        })*/
        uni.hideLoading()
        uni.showToast({ title: '申请提交成功', icon: 'success' })
        showJoinPopup.value = false
        // 重置表单
        formData.value = {
            realName: '',
            mobile: '',
            province: '',
            city: '',
            district: '',
            formatRegion: '',
            reason: ''
        }
        agreeTerms.value = false
    } catch (error: any) {
        uni.hideLoading()
        uni.showToast({ title: error.message || '提交失败', icon: 'none' })
    }
}

// 查看协议
const viewAgreement = () => {
    router.navigateTo('/packageA/pages/agreement/agreement?type=engineer')
}

// 前往实名认证
const goToVerification = () => {
    uni.showToast({ title: '前往实名认证', icon: 'none' })
    // 这里可以跳转到实名认证页面
}

// 处理挂起订单帮助
const handleSuspendHelp = () => {
    uni.showToast({ title: '查看挂起订单帮助', icon: 'none' })
    // 这里可以跳转到帮助页面或弹窗
}

// 切换日历模式
const toggleCalendarMode = () => {
    uni.showToast({ title: '切换日历模式', icon: 'none' })
    // 这里可以实现日历模式切换
}

// 显示时间选择器
// const showTimePickerModal = () => {
//     uni.showActionSheet({
//         itemList: ['这1个月', '这3个月', '这6个月', '这1年'],
//         success: (res) => {
//             const timeOptions = ['这1个月', '这3个月', '这6个月', '这1年']
//             uni.showToast({
//                 title: `选择了${timeOptions[res.tapIndex]}`,
//                 icon: 'none'
//             })
//         }
//     })
// }

// 挂起订单相关方法
// 取消挂起
const cancelSuspend = (order: any) => {
    uni.showModal({
        title: '取消挂起',
        content: `是否确认取消挂起该订单？\n服务：${order.title}\n取消后将不再显示该订单。`,
        success: (res) => {
            if (res.confirm) {
                uni.showToast({ 
                    title: '已取消挂起', 
                    icon: 'success' 
                })
                
                // 从列表中移除该订单
                const index = suspendedOrders.value.findIndex(item => item.id === order.id)
                if (index > -1) {
                    suspendedOrders.value.splice(index, 1)
                }
            }
        }
    })
}

// 恢复服务
const restoreService = (order: any) => {
    uni.showModal({
        title: '恢复服务',
        content: `是否确认恢复该订单的服务？\n服务：${order.title}\n恢复后将进入正常流程。`,
        success: (res) => {
            if (res.confirm) {
                uni.showLoading({ title: '处理中...' })
                
                setTimeout(() => {
                    uni.hideLoading()
                    uni.showToast({ 
                        title: '服务已恢复', 
                        icon: 'success' 
                    })
                    
                    // 从列表中移除该订单
                    const index = suspendedOrders.value.findIndex(item => item.id === order.id)
                    if (index > -1) {
                        suspendedOrders.value.splice(index, 1)
                    }
                }, 1000)
            }
        }
    })
}

// 完工订单相关方法
// 再次服务
const rebookService = (order: any) => {
    uni.showModal({
        title: '再次服务',
        content: `是否联系客户进行再次服务？\n服务：${order.title}`,
        success: (res) => {
            if (res.confirm) {
                uni.showToast({ 
                    title: '已联系客户', 
                    icon: 'success' 
                })
                // 这里可以跳转到联系客户页面或发送消息
            }
        }
    })
}

// 查看订单详情
const viewOrderDetails = (order: any) => {
    uni.showToast({ title: '查看订单详情', icon: 'none' })
    // 这里可以跳转到订单详情页面
}


// 拨打客户电话
const callCustomer = (customer: any) => {
    uni.makePhoneCall({
        phoneNumber: customer.phone,
        fail: () => {
            uni.showToast({ title: '拨打失败', icon: 'none' })
        }
    })
}

// 发送消息给客户
const sendMessage = (customer: any) => {
    uni.showToast({ title: '打开聊天界面', icon: 'none' })
    // 这里可以跳转到聊天页面
}

// 导航到客户地址
const navigateToCustomer = (order: any) => {
    uni.openLocation({
        latitude: 39.9042,
        longitude: 116.4074,
        name: '服务地址',
        address: order.address,
        fail: () => {
            uni.showToast({ title: '导航失败', icon: 'none' })
        }
    })
}



// 忽略预约订单
const ignoreAppointment = (order: any) => {
    uni.showModal({
        title: '忽略订单',
        content: '确认忽略该预约订单吗？忽略后将不再显示该订单。',
        success: (res) => {
            if (res.confirm) {
                uni.showToast({ 
                    title: '已忽略该订单', 
                    icon: 'success' 
                })
                
                // 从列表中移除该订单
                const index = appointmentOrders.value.findIndex(item => item.id === order.id)
                if (index > -1) {
                    appointmentOrders.value.splice(index, 1)
                }
            }
        }
    })
}

// 接单相关方法
// 接取订单   立即接单
const takeOrder = async (order: any) => {
  uni.showModal({
    title: '接取订单',
    content: `是否确认接取该订单？\n服务：${order.title}\n金额：¥${order.price}`,
    success: async (res) => {
      if (res.confirm) {
        // 调用接单API
        uni.showLoading({ title: '接单中...' })

        try {
          // 使用导入的 add 接口进行接单
          await add({ orderId: order.id })

          uni.hideLoading()
          uni.showToast({
            title: '接单成功',
            icon: 'success'
          })

          // 使用当前分页参数重新加载数据
          queryList(
            takingOrdersPagination.value.pageNo,
            takingOrdersPagination.value.pageSize
          );


        } catch (error: any) {
          uni.hideLoading()
          uni.showToast({
            title: error.message || '接单失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 待预约相关方法
// 立即预约
const makeAppointment = async (order: any) => {
  // 检查是否已选择开始时间和结束时间
  if (!order.selectedStartTime || !order.selectedEndTime) {
    uni.showToast({
      title: '请选择完整的预约时间',
      icon: 'none'
    });
    return;
  }

  uni.showModal({
    title: '立即预约',
    content: `是否确认预约该订单？
服务：${order.title}
地址：${order.address}
开始时间：${order.selectedStartTime}
结束时间：${order.selectedEndTime}`,
    success: async (res) => {
      if (res.confirm) {
        // 显示加载提示
        uni.showLoading({ title: '预约中...' });

        try {
          // 调用预约接口，传递订单ID和预约时间
          // 这里需要替换为实际的API调用

          // 示例API调用（需要根据实际接口调整）：
          await appointment({
            id: order.id,
            startDateTime: formatDateToString(new Date(order.selectedStartTimeValue)),
            endDateTime: formatDateToString(new Date(order.selectedEndTimeValue))
          });

          uni.hideLoading();
          uni.showToast({
            title: '预约成功',
            icon: 'success'
          });
          orderAcceptList(1,10)

        } catch (error: any) {
          uni.hideLoading();
          uni.showToast({
            title: error.message || '预约失败',
            icon: 'none'
          });
        }
      }
    }
  });
};


// 忽略订单
const ignoreOrder = (order: any) => {
    uni.showModal({
        title: '忽略订单',
        content: '确认忽略该订单吗？忽略后将不再显示该订单。',
        success: (res) => {
            if (res.confirm) {
                uni.showToast({ 
                    title: '已忽略该订单', 
                    icon: 'success' 
                })
                
                // 从列表中移除该订单
                const index = takingOrders.value.findIndex(item => item.id === order.id)
                if (index > -1) {
                    takingOrders.value.splice(index, 1)
                }
                
                // 如果当前页面数据较少且还有更多数据，加载下一页
                if (takingOrders.value.length < 5 && takingOrdersPagination.value.hasMore) {
                  queryList(
                    takingOrdersPagination.value.pageNo + 1,
                    takingOrdersPagination.value.pageSize
                  );
                }
            }
        }
    })
}

const getUserLocation = (): Promise<{ latitude: number; longitude: number }> => {
  return new Promise((resolve, reject) => {
    uni.getLocation({
      type: 'wgs84',
      success: (res) => {
        resolve({
          latitude: res.latitude,
          longitude: res.longitude
        });
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

// 打开确认收款弹窗
const openConfirmPaymentModal = (order: any) => {
    confirmPaymentOrder.value = order;
    confirmPaymentAmount.value = '';
    showConfirmPaymentPopup.value = true;
};

// 确认收款
const confirmPayment = async () => {
    if (!confirmPaymentOrder.value) return;
    
    uni.showLoading({ title: '处理中...' });
    
    try {
        // 调用实际的确认收款API，传递订单ID和金额
        await receivePayment({
          id: confirmPaymentOrder.value.id,
          offlineMoney: confirmPaymentAmount.value || 0
        });
        // 关闭弹窗
        showConfirmPaymentPopup.value = false;
        
        // 提示成功
        uni.showToast({
            title: '收款确认成功',
            icon: 'success'
        });
        
        // 更新订单状态为已收款(状态6)
        const index = completedOrders.value.findIndex(order => order.id === confirmPaymentOrder.value.id);
        if (index > -1) {
            completedOrders.value[index].status = 6;
        }
        
        // 清空数据
        confirmPaymentOrder.value = null;
        confirmPaymentAmount.value = '';
        
    } catch (error) {
        uni.showToast({
            title: '收款确认失败',
            icon: 'none'
        });
        console.error('收款确认失败', error);
    } finally {
        uni.hideLoading();
    }
};


//下单相关的
const queryList = async (pageNo: number, pageSize: number) => {
  try {
    // 获取用户地理位置
    let locationParams = {};
    try {
      const location = await getUserLocation();
      locationParams = {
        latitude: location.latitude,
        longitude: location.longitude
      };
    } catch (locationError) {
      console.warn('获取用户地理位置失败:', locationError);
      // 即使获取地理位置失败，也继续查询订单列表
    }

    const result = await orderedLists({
      pageNo,
      pageSize,
      status: 2,
      ...locationParams // 将地理位置参数传递给后端
    });

    // 根据页码处理数据：第一页直接赋值，其他页追加数据
    if (pageNo === 1) {
      takingOrders.value = result.lists || [];
    } else {
      takingOrders.value = [...takingOrders.value, ...(result.lists || [])];
    }

    // 更新分页信息
    const currentPageNo = result.pageNo || pageNo;
    const currentPageSize = result.pageSize || pageSize;
    const total = result.count || 0;
    const hasMore = currentPageNo * currentPageSize < total;

    takingOrdersPagination.value = {
      pageNo: currentPageNo,
      pageSize: currentPageSize,
      total: total,
      hasMore: hasMore
    };
  } catch (e) {
    console.error('获取挂起订单失败', e);
    // 错误时只在第一页清空数据
    if (pageNo === 1) {
      takingOrders.value = [];
    }
    // 重新设置为有更多数据，让用户可以重试
    takingOrdersPagination.value.hasMore = true;
  }
};
//预约相关
const orderAcceptList = async (pageNo: number, pageSize: number) => {
  try {
    const result = await orderAcceptLists({
      pageNo,
      pageSize,
    });

    // 根据页码处理数据：第一页直接赋值，其他页追加数据
    if (pageNo === 1) {
      appointmentOrders.value = result.lists || [];
    } else {
      appointmentOrders.value = [...appointmentOrders.value, ...(result.lists || [])];
    }

    // 更新分页信息
    const currentPageNo = result.pageNo || pageNo;
    const currentPageSize = result.pageSize || pageSize;
    const total = result.count || 0;
    const hasMore = currentPageNo * currentPageSize < total;

    appointmentOrdersPagination.value = {
      pageNo: currentPageNo,
      pageSize: currentPageSize,
      total: total,
      hasMore: hasMore
    };
  } catch (e) {
    console.error('获取待预约订单失败', e);
    // 错误时只在第一页清空数据
    if (pageNo === 1) {
      appointmentOrders.value = [];
    }
    // 重新设置为有更多数据，让用户可以重试
    appointmentOrdersPagination.value.hasMore = true;
  }
};

const orderRservedList = async (pageNo: number, pageSize: number) => {
  try {
    const result = await orderRservedLists({
      pageNo,
      pageSize,
    });

    // 根据页码处理数据：第一页直接赋值，其他页追加数据
    if (pageNo === 1) {
      serviceOrders.value = result.lists || [];
    } else {
      serviceOrders.value = [...serviceOrders.value, ...(result.lists || [])];
    }

    // 更新分页信息
    const currentPageNo = result.pageNo || pageNo;
    const currentPageSize = result.pageSize || pageSize;
    const total = result.count || 0;
    const hasMore = currentPageNo * currentPageSize < total;

    serviceOrdersPagination.value = {
      pageNo: currentPageNo,
      pageSize: currentPageSize,
      total: total,
      hasMore: hasMore
    };
  } catch (e) {
    console.error('获取服务中订单失败', e);
    // 错误时只在第一页清空数据
    if (pageNo === 1) {
      serviceOrders.value = [];
    }
    // 重新设置为有更多数据，让用户可以重试
    serviceOrdersPagination.value.hasMore = true;
  }
};
const completedList = async (pageNo: number, pageSize: number) => {
  try {
    // 构建请求参数
    const params: any = {
      pageNo,
      pageSize
    };
    
    // 根据当前筛选条件添加状态参数
    // 状态值: 全部不传, 客户确认4, 待收款5, 交易成功6, 交易关闭7
    if (activeFilter.value === 1) {
      // 客户确认
      params.status = 4;
    } else if (activeFilter.value === 2) {
      // 待收款
      params.status = 5;
    } else if (activeFilter.value === 3) {
      // 交易成功
      params.status = 6;
    } else if (activeFilter.value === 4) {
      // 交易关闭
      params.status = 7;
    }
    // activeFilter.value === 0 为"全部"，不传status参数

    const result = await completedLists(params);

    // 根据页码处理数据：第一页直接赋值，其他页追加数据
    if (pageNo === 1) {
      completedOrders.value = result.lists || [];
    } else {
      completedOrders.value = [...completedOrders.value, ...(result.lists || [])];
    }

    // 更新分页信息
    const currentPageNo = result.pageNo || pageNo;
    const currentPageSize = result.pageSize || pageSize;
    const total = result.count || 0;
    const hasMore = currentPageNo * currentPageSize < total;

    completedOrdersPagination.value = {
      pageNo: currentPageNo,
      pageSize: currentPageSize,
      total: total,
      hasMore: hasMore
    };

  } catch (e) {
    console.error('获取完工订单失败', e);
    // 错误时只在第一页清空数据
    if (pageNo === 1) {
      completedOrders.value = [];
    }
    // 重新设置为有更多数据，让用户可以重试
    completedOrdersPagination.value.hasMore = true;
  }
};



const openStartTimePicker = (order: any) => {
  chooseDateTime(order, 'start');
};

const openEndTimePicker = (order: any) => {
  if (!order.selectedStartTime) {
    uni.showToast({
      title: '请先选择开始时间',
      icon: 'none'
    });
    return;
  }
  chooseDateTime(order, 'end');
};

// 修改 chooseDateTime 函数
const chooseDateTime = (order: any, type: string) => {
  // 使用多级选择器实现时间选择
  showMultiPicker(order, type);
};








const showMultiPicker = (order: any, type: string) => {
  const now = new Date();
  let baseDate = new Date(now.getTime() + 30 * 60000); // 默认30分钟后

  if (type === 'end' && order.selectedStartTimeValue) {
    baseDate = new Date(order.selectedStartTimeValue);
  }

  // 生成日期选项（未来30天）
  const dateOptions = [];
  for (let i = 0; i < 30; i++) {
    const date = new Date(baseDate);
    date.setDate(date.getDate() + i);
    dateOptions.push({
      label: `${date.getMonth() + 1}月${date.getDate()}日`,
      value: new Date(date.getFullYear(), date.getMonth(), date.getDate()) // 设置为当天0点
    });
  }

  // 使用多列选择器
  uni.showActionSheet({
    itemList: dateOptions.map(opt => opt.label),
    title: '选择日期',
    success: function(res) {
      const selectedDate = dateOptions[res.tapIndex];

      // 选择时间
      showTimePicker(order, type, selectedDate.value);
    }
  });
};

const showTimePicker = (order: any, type: string, selectedDate: Date) => {
  const now = new Date();
  const isToday = selectedDate.toDateString() === now.toDateString();

  // 生成时间选项（24小时制，每小时一个选项）
  const timeOptions = [];
  const startHour = isToday ? now.getHours() + 1 : 0; // 如果是今天，从当前小时的下一小时开始

  // 如果是今天且已经过了23点，则没有可选时间
  if (isToday && startHour > 23) {
    uni.showToast({
      title: '今天已无可选时间，请选择其他日期',
      icon: 'none'
    });
    return;
  }

  // 生成时间选项
  for (let h = startHour; h < 24; h++) {
    const hourStr = h.toString().padStart(2, '0');
    timeOptions.push({
      label: `${hourStr}:00`,
      value: h
    });

    // 添加30分钟的时间点
    if (h < 23 || (h === 23 && !isToday)) { // 今天最后个小时不添加30分选项
      timeOptions.push({
        label: `${hourStr}:30`,
        value: h + 0.5 // 用0.5表示30分钟
      });
    }
  }

  // 如果没有可选时间
  if (timeOptions.length === 0) {
    uni.showToast({
      title: '无可选时间',
      icon: 'none'
    });
    return;
  }

  uni.showActionSheet({
    itemList: timeOptions.map(opt => opt.label),
    title: '选择时间',
    success: function(timeRes) {
      const selectedTime = timeOptions[timeRes.tapIndex];

      // 构造完整日期时间
      const fullDate = new Date(selectedDate);
      const hour = Math.floor(selectedTime.value);
      const minute = (selectedTime.value % 1) * 60;
      fullDate.setHours(hour, minute, 0, 0);

      const formattedTime = formatDate(fullDate);

      if (type === 'start') {
        // 验证开始时间不能早于当前时间
        if (fullDate < new Date()) {
          uni.showToast({
            title: '开始时间不能早于当前时间',
            icon: 'none'
          });
          return;
        }

        order.selectedStartTime = formattedTime;
        order.selectedStartTimeValue = fullDate.getTime();

        // 如果已有结束时间且结束时间早于新的开始时间，则清空结束时间
        if (order.selectedEndTimeValue && order.selectedEndTimeValue <= fullDate.getTime()) {
          order.selectedEndTime = '';
          order.selectedEndTimeValue = null;
        }
      } else {
        // 验证结束时间必须晚于开始时间
        if (fullDate.getTime() <= order.selectedStartTimeValue) {
          uni.showToast({
            title: '结束时间必须晚于开始时间',
            icon: 'none'
          });
          return;
        }
        order.selectedEndTime = formattedTime;
        order.selectedEndTimeValue = fullDate.getTime();
      }
    }
  });
};


// 保持 formatDate 函数不变
const formatDate = (date: Date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 添加日期格式化函数，将日期转换为字符串格式
const formatDateToString = (date: Date): string => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

//服务中代码
// 根据订单状态获取操作按钮文本
const getServiceActionButton = (order: any) => {
  const currentStep = order.serviceProgress.steps.find((step: any) => step.status === 'current');

  if (!currentStep) return null;

  switch (currentStep.name) {
    case '已预约':
      return {
        text: '出发',
        action: () => updateServiceStatus(order, '出发')
      };
    case '已出发':
      return {
        text: '到达地点',
        action: () => updateServiceStatus(order, '到达地点')
      };
    case '到达地点':
      return {
        text: '开始服务',
        action: () => updateServiceStatus(order, '开始服务')
      };
    case '服务中':
      return {
        text: '完成服务',
        action: () => showImageUploadModals(order)  // 修改为打开图片上传弹窗
      };
    default:
      return null;
  }
};

// 更新服务状态的函数
const updateServiceStatus = async (order: any, action: string) => {
  // 显示确认框
  uni.showModal({
    title: '确认操作',
    content: `是否确认执行${action}操作？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: '处理中...' });

          // 根据当前步骤确定下一步的状态值
          let status = 1; // 默认已预约
          const steps = order.serviceProgress.steps;
          const currentIndex = steps.findIndex((step: any) => step.status === 'current');

          // 根据当前步骤确定要提交的状态值
          if (currentIndex === 0) status = 2; // 已出发
          else if (currentIndex === 1) status = 3; // 到达地点
          else if (currentIndex === 2) status = 4; // 服务中

          // 调用接口更新状态
          await addOrderAcceptDdetails({
            laOrderAcceptId: order.id,
            status: status
          });

          uni.hideLoading();

          // 更新本地状态
          if (currentIndex !== -1 && currentIndex < steps.length - 1) {
            // 将当前步骤标记为完成
            steps[currentIndex].status = 'completed';
            // 将下一步标记为当前步骤
            steps[currentIndex + 1].status = 'current';
          }

          uni.showToast({
            title: `${action}成功`,
            icon: 'success'
          });
        } catch (error) {
          uni.hideLoading();
          uni.showToast({
            title: `${action}失败`,
            icon: 'none'
          });
          console.error('更新状态失败:', error);
        }
      }
    }
  });
};


// 图片上传相关状态
const showImageUploadModal = ref(false);
const uploadedImages = ref<string[]>([]);
const currentOrder = ref<any>(null);
const tempImageUrls = ref<string[]>([]); // 临时存储上传的图片URL
const ImageUrls = ref<string[]>([]); // 临时存储上传的图片URL

const maxImages = 9; // 最大支持9张图片

// 显示图片上传弹窗
const showImageUploadModals = (order: any) => {
  currentOrder.value = order;
  showImageUploadModal.value = true;
  uploadedImages.value = [];
  tempImageUrls.value = [];
  ImageUrls.value = [];
};

// 处理图片上传（支持多图）
const handleImageUpload = () => {
  try {
    // 使用uni.chooseImage选择多张图片
    uni.chooseImage({
      count: maxImages - tempImageUrls.value.length, // 可选择的数量
      sizeType: ['compressed'], // 可以指定原图或压缩图，默认二者都有
      sourceType: ['album', 'camera'] // 可以指定来源是相册还是相机，默认二者都有
    }).then(res => {
      if (res.tempFilePaths && res.tempFilePaths.length > 0) {
        // 上传过程
        for (const filePath of res.tempFilePaths) {
          uploadSingleImage(filePath);
        }
      }
    }).catch(error => {
      console.error('图片选择失败:', error);
    });
  } catch (error) {
    console.error('图片选择失败:', error);
  }
};

// 单张图片上传
const uploadSingleImage = (filePath) => {
  try {
    uni.showLoading({ title: '上传中...' });

    // Call the backend upload API
    uploadImage(filePath, (error, imageUrl) => {
      if (error) {
        uni.hideLoading();
        uni.showToast({ title: '上传失败', icon: 'none' });
        console.error('Upload failed:', error);
      } else {
        tempImageUrls.value.push(imageUrl.path);
        ImageUrls.value.push(imageUrl.url);

        uni.hideLoading();
        uni.showToast({ title: '上传成功', icon: 'success' });
      }
    });
  } catch (error) {
    uni.hideLoading();
    uni.showToast({ title: '上传失败', icon: 'none' });
    console.error('Upload failed:', error);
  }
};

// 删除已上传的图片
const removeImage = (index: number) => {
  tempImageUrls.value.splice(index, 1);
};

// 取消完成服务
const cancelCompleteService = () => {
  showImageUploadModal.value = false;
  tempImageUrls.value = [];
  currentOrder.value = null;
};

// 确认完成服务
const confirmCompleteService = async () => {
  if (currentOrder.value) {
    try {
      uni.showLoading({ title: '处理中...' });

      // Call complete service API with image URLs
      await addOrderAcceptDdetails({
        laOrderAcceptId: currentOrder.value.id,
        status: 5,
        images: ImageUrls.value // Pass the array of image URLs
      });

      uni.hideLoading();

      // Update local state
      const steps = currentOrder.value.serviceProgress.steps;
      const currentIndex = steps.findIndex((step: any) => step.status === 'current');

      if (currentIndex !== -1) {
        steps[currentIndex].status = 'completed';
        if (currentIndex + 1 < steps.length) {
          steps[currentIndex + 1].status = 'completed';
        }
      }

      uni.showToast({
        title: '服务已完成',
        icon: 'success'
      });

      // Close modal
      showImageUploadModal.value = false;

      // Remove order from list
      const index = serviceOrders.value.findIndex((item: any) => item.id === currentOrder.value.id);
      if (index > -1) {
        serviceOrders.value.splice(index, 1);
      }

    } catch (error) {
      uni.hideLoading();
      uni.showToast({
        title: '完成服务失败',
        icon: 'none'
      });
      console.error('Complete service failed:', error);
    }
  }
};
// 图片预览
const previewImage = (index) => {
  // 使用uni.previewImage进行图片预览
  uni.previewImage({
    urls: tempImageUrls.value,
    current: index,
    indicator: 'default',
    loop: true
  });
};

// 根据订单状态获取操作按钮文本
//接单状态已预约1/已出发2/到达地点3/服务中4/已完成5
const getActionStatus = (status: number): { text: string, type: string } => {
  switch (status) {
    case 1: return { text: '已预约', type: 'scheduled' };
    case 2: return { text: '已出发', type: 'departed' };
    case 3: return { text: '到达地点', type: 'arrived' };
    case 4: return { text: '服务中', type: 'servicing' };
    case 5: return { text: '已完成', type: 'completed' };
    default: return { text: '', type: '' };
  }
};
onMounted(() => {
    // 页面初始化逻辑
    // queryList(1, 10)

    loadTabData(activeTab.value)
})
</script>

<style lang="scss" scoped>
//服务中点击完成的样式
.image-upload-modal {
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .modal-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }

  .modal-content {
    padding: 30rpx;

    .image-upload-area {
      min-height: 300rpx;
      border: 1rpx dashed #e0e0e0;
      border-radius: 12rpx;
      margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      padding: 20rpx;

      .upload-tip {
        text-align: center;
        color: #999;
        font-size: 24rpx;
        margin-bottom: 20rpx;
      }

      .uploaded-images {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        width: 100%;
        margin-bottom: 20rpx;
      }

      .image-item {
        position: relative;
        width: 150rpx;
        height: 150rpx;

        .uploaded-image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
          object-fit: cover;
        }

        .remove-icon {
          position: absolute;
          top: -12rpx;
          right: -12rpx;
          background: #ff4444;
          border-radius: 50%;
          color: #fff;
          width: 36rpx;
          height: 36rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
        }
      }

      .upload-button {
        width: 150rpx;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1rpx dashed #e0e0e0;
        border-radius: 8rpx;
        background: #fafafa;

        .upload-icon {
          font-size: 48rpx;
          color: #999;
        }

        .upload-text {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }

      .image-count {
        color: #999;
        font-size: 24rpx;
        text-align: right;
        margin-top: 10rpx;
      }
    }
  }

  .modal-footer {
    display: flex;
    gap: 20rpx;
    padding: 20rpx 30rpx 30rpx;

    .cancel-btn, .confirm-btn {
      flex: 1;
      padding: 24rpx 0;
      border-radius: 50rpx;
      font-size: 28rpx;
    }

    .cancel-btn {
      background: #f5f5f5;
      color: #666;
      border: 1rpx solid #e0e0e0;
    }

    .confirm-btn {
      background: linear-gradient(135deg, #00bcd4, #2196f3);
      color: #fff;
      border: none;
    }
  }
}


//服务中
.dynamic-action-btn {
  width: 100%;
  background: linear-gradient(135deg, #00bcd4, #2196f3);
  color: #fff;
  border: none;
  border-radius: 50rpx;
  padding: 24rpx 0;
  font-size: 28rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;

  &:active {
    opacity: 0.8;
  }
}

// 时间代码
.no-action-state {
  text-align: center;
  padding: 20rpx 0;

  .state-text {
    color: #999;
    font-size: 28rpx;
  }
}
// 在<style>部分添加时间选择器样式
.time-picker {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 10rpx 0;

  .selected-time {
    color: #333;
    font-size: 26rpx;
    flex: 1;
  }

  .placeholder {
    color: #999;
    font-size: 26rpx;
    flex: 1;

    &.disabled {
      color: #ccc;
    }
  }
}

.engineer-page {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
}

.header-nav {
    background: linear-gradient(135deg, #00bcd4 0%, #2196f3 100%);
    padding: 20rpx 40rpx;
    padding-top: calc(var(--status-bar-height) + 20rpx);
    
    .nav-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80rpx;
    }
    
    .nav-left {
        .avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
    }
    
    .nav-center {
        display: flex;
        align-items: center;
        
        .title {
            color: #fff;
            font-size: 36rpx;
            font-weight: 500;
            margin-right: 10rpx;
        }
    }
    
    .nav-right {
        .message-icon {
            position: relative;
            
            .red-dot {
                position: absolute;
                top: 0;
                right: 0;
                width: 16rpx;
                height: 16rpx;
                background-color: #ff4444;
                border-radius: 50%;
            }
        }
    }
}

.tab-bar {
    background: #fff;
    display: flex;
    padding: 0 40rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    
    .tab-item {
        flex: 1;
        text-align: center;
        padding: 30rpx 0;
        color: #999;
        font-size: 28rpx;
        position: relative;
        
        &.active {
            color: #00bcd4;
            font-weight: 500;
            
            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60rpx;
                height: 6rpx;
                background: linear-gradient(90deg, #00bcd4 0%, #2196f3 100%);
                border-radius: 3rpx;
            }
        }
    }
}

.content-area {
    flex: 1;
    background-color: #f5f5f5;
    overflow-y: auto;
    
    // 预约提醒样式
    .appointment-notice {
        background: #fff;
        margin: 20rpx;
        border-radius: 12rpx;
        padding: 0;
        
        .notice-content {
            display: flex;
            align-items: center;
            padding: 24rpx 30rpx;
            
            .notice-text {
                flex: 1;
                color: #666;
                font-size: 26rpx;
                margin: 0 20rpx;
                line-height: 1.4;
            }
        }
    }
    
    // 筛选标签样式
    .filter-tabs {
        display: flex;
        padding: 0 20rpx 20rpx 20rpx;
        gap: 20rpx;
        
        .filter-tab {
            padding: 16rpx 32rpx;
            background: #fff;
            border-radius: 50rpx;
            color: #999;
            font-size: 26rpx;
            border: 2rpx solid #e5e5e5;
            
            &.active {
                background: #00bcd4;
                color: #fff;
                border-color: #00bcd4;
            }
        }
    }
    
    // 服务中二级标签样式
    .service-tabs {
        display: flex;
        padding: 20rpx;
        gap: 20rpx;
        
        .service-tab {
            padding: 16rpx 32rpx;
            background: #fff;
            border-radius: 50rpx;
            color: #999;
            font-size: 26rpx;
            border: 2rpx solid #e5e5e5;
            
            &.active {
                background: #00bcd4;
                color: #fff;
                border-color: #00bcd4;
            }
        }
    }
    
    // 服务提醒样式
    .service-notice {
        background: #fff;
        margin: 0 20rpx 20rpx 20rpx;
        border-radius: 12rpx;
        padding: 0;
        
        .notice-content {
            display: flex;
            align-items: center;
            padding: 24rpx 30rpx;
            
            .notice-text {
                flex: 1;
                color: #666;
                font-size: 26rpx;
                margin: 0 20rpx;
                line-height: 1.4;
            }
        }
    }
    
    // 完工/关闭二级标签样式
    .completed-tabs {
        display: flex;
        padding: 20rpx;
        gap: 20rpx;
        
        .completed-tab {
            padding: 16rpx 32rpx;
            background: #fff;
            border-radius: 50rpx;
            color: #999;
            font-size: 26rpx;
            border: 2rpx solid #e5e5e5;
            
            &.active {
                background: #00bcd4;
                color: #fff;
                border-color: #00bcd4;
            }
        }
    }
    
    // 师傅提醒样式
    .master-notice {
        background: #fff;
        margin: 0 20rpx 20rpx 20rpx;
        border-radius: 12rpx;
        padding: 0;
        
        .notice-content {
            display: flex;
            align-items: center;
            padding: 24rpx 30rpx;
            
            .notice-text {
                flex: 1;
                color: #666;
                font-size: 26rpx;
                margin: 0 20rpx;
                line-height: 1.4;
            }
        }
    }
    
    // 数据时间筛选样式
    .data-time-filter {
        margin: 0 20rpx 20rpx 20rpx;
        
        .time-filter-content {
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            
            .time-label {
                color: #333;
                font-size: 28rpx;
                margin-right: 20rpx;
            }
            
            .time-value {
                flex: 1;
                color: #666;
                font-size: 28rpx;
            }
        }
    }
    
    // 挂起单二级标签样式
    .suspended-tabs {
        display: flex;
        padding: 20rpx;
        gap: 20rpx;
        flex-wrap: wrap;
        
        .suspended-tab {
            padding: 16rpx 32rpx;
            background: #fff;
            border-radius: 50rpx;
            color: #999;
            font-size: 26rpx;
            border: 2rpx solid #e5e5e5;
            
            &.active {
                background: #00bcd4;
                color: #fff;
                border-color: #00bcd4;
            }
        }
    }
    
    // 挂起订单说明样式
    .suspended-notice {
        background: #fff;
        margin: 0 20rpx 20rpx 20rpx;
        border-radius: 12rpx;
        padding: 30rpx;
        
        .suspended-notice-content {
            .suspended-notice-text {
                color: #666;
                font-size: 26rpx;
                line-height: 1.6;
                margin-bottom: 20rpx;
                display: block;
            }
            
            .suspended-link {
                color: #00bcd4;
                font-size: 26rpx;
                text-decoration: underline;
            }
        }
    }
    
    // 挂起订单列表样式
    .suspended-order-list {
        padding: 20rpx;

        .suspended-card {
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            padding: 30rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
            border-left: 6rpx solid #ff9800;
            
            .suspended-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24rpx;
                
                .service-title {
                    flex: 1;
                    
                    .title-text {
                        color: #00bcd4;
                        font-size: 32rpx;
                        font-weight: 600;
                    }
                }
                
                .suspended-status {
                    padding: 6rpx 16rpx;
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    font-weight: 500;
                    
                    &.waiting {
                        background: #fff3e0;
                        color: #ff9800;
                    }
                    
                    &.customer {
                        background: #ffebee;
                        color: #e91e63;
                    }
                    
                    &.other {
                        background: #e3f2fd;
                        color: #2196f3;
                    }
                }
            }
            
            .suspended-info {
                margin-bottom: 30rpx;
                
                .info-item {
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 16rpx;
                    
                    &:last-of-type {
                        margin-bottom: 20rpx;
                    }
                    
                    .info-label {
                        color: #666;
                        font-size: 26rpx;
                        margin: 0 12rpx 0 12rpx;
                        flex-shrink: 0;
                    }
                    
                    .info-text {
                        color: #333;
                        font-size: 26rpx;
                        flex: 1;
                        margin-left: 12rpx;
                        line-height: 1.4;
                    }
                    
                    .price-text {
                        color: #333;
                        font-size: 28rpx;
                        font-weight: 600;
                        margin-left: 12rpx;
                    }
                    
                    .reason-text {
                        color: #ff9800;
                        font-size: 26rpx;
                        flex: 1;
                        margin-left: 12rpx;
                        line-height: 1.4;
                        font-weight: 500;
                    }
                }
                
                .suspend-time {
                    color: #999;
                    font-size: 24rpx;
                    display: block;
                    margin-left: 40rpx;
                }
            }
            
            .suspended-actions {
                display: flex;
                gap: 20rpx;
                padding-top: 24rpx;
                border-top: 1rpx solid #f0f0f0;
                
                .cancel-suspend-btn {
                    flex: 1;
                    background: #f5f5f5;
                    color: #666;
                    border: 1rpx solid #e0e0e0;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 28rpx;
                    
                    &:active {
                        background: #e8e8e8;
                    }
                }
                
                .restore-service-btn {
                    flex: 1;
                    background: linear-gradient(135deg, #00bcd4, #2196f3);
                    color: #fff;
                    border: none;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 28rpx;
                    font-weight: 600;
                    
                    &:active {
                        opacity: 0.8;
                    }
                }
            }
        }
    }

    // 完工订单列表样式
    .completed-order-list {
        padding: 20rpx;
        
        .completed-card {
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            overflow: hidden;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
            
            .completion-status {
                background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                padding: 40rpx 30rpx;
                text-align: center;
                position: relative;
                
                .status-icon {
                    margin-bottom: 20rpx;
                    
                    .success-circle {
                        width: 120rpx;
                        height: 120rpx;
                        border-radius: 50%;
                        background: linear-gradient(135deg, #4caf50, #388e3c);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 0 auto;
                        position: relative;
                        
                        &::before {
                            content: '';
                            position: absolute;
                            width: 160rpx;
                            height: 160rpx;
                            border-radius: 50%;
                            background: rgba(76, 175, 80, 0.1);
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
                
                .status-content {
                    .status-title {
                        color: #333;
                        font-size: 36rpx;
                        font-weight: 600;
                        display: block;
                        margin-bottom: 12rpx;
                    }
                    
                    .confirm-payment-btn {
                        background: linear-gradient(135deg, #00bcd4, #2196f3);
                        color: #fff;
                        border: none;
                        border-radius: 50rpx;
                        padding: 16rpx 32rpx;
                        font-size: 28rpx;
                        font-weight: 600;
                        margin-top: 20rpx;
                    }
                    
                    .status-desc {
                        color: #666;
                        font-size: 26rpx;
                        line-height: 1.4;
                        display: block;
                        margin-bottom: 16rpx;
                    }
                    
                    .completion-time {
                        color: #999;
                        font-size: 24rpx;
                        display: block;
                    }
                }
            }
            
            .completed-order-info {
                padding: 30rpx;
                
                .order-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 24rpx;
                    
                    .order-title {
                        color: #00bcd4;
                        font-size: 32rpx;
                        font-weight: 600;
                        flex: 1;
                    }
                    
                    .order-price {
                        color: #ff6b35;
                        font-size: 36rpx;
                        font-weight: 700;
                    }
                }
                
                .order-details {
                    .detail-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 16rpx;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        .detail-label {
                            color: #666;
                            font-size: 26rpx;
                            margin: 0 12rpx 0 12rpx;
                            flex-shrink: 0;
                        }
                        
                        .detail-text {
                            color: #333;
                            font-size: 26rpx;
                            flex: 1;
                            margin-left: 12rpx;
                            line-height: 1.4;
                        }
                    }
                }
            }
            
            .customer-review {
                background: #fafafa;
                padding: 30rpx;
                margin: 0 30rpx;
                border-radius: 12rpx;
                margin-bottom: 30rpx;
                
                .review-title {
                    color: #333;
                    font-size: 28rpx;
                    font-weight: 600;
                    display: block;
                    margin-bottom: 20rpx;
                }
                
                .review-content {
                    .review-text {
                        color: #555;
                        font-size: 26rpx;
                        line-height: 1.5;
                        display: block;
                        margin-bottom: 20rpx;
                        background: #fff;
                        padding: 20rpx;
                        border-radius: 8rpx;
                        border-left: 4rpx solid #00bcd4;
                    }
                    
                    .review-rating {
                        display: flex;
                        align-items: center;
                        gap: 4rpx;
                        
                        .rating-score {
                            color: #ffb400;
                            font-size: 26rpx;
                            font-weight: 600;
                            margin-left: 12rpx;
                        }
                    }
                }
            }
            
            .completed-actions {
                display: flex;
                gap: 20rpx;
                padding: 0 30rpx 30rpx 30rpx;
                
                .rebook-btn {
                    flex: 1;
                    background: #f5f5f5;
                    color: #666;
                    border: 1rpx solid #e0e0e0;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 26rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8rpx;
                    
                    &:active {
                        background: #e8e8e8;
                    }
                }
                
                .view-details-btn {
                    flex: 1;
                    background: linear-gradient(135deg, #00bcd4, #2196f3);
                    color: #fff;
                    border: none;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 26rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8rpx;
                    
                    &:active {
                        opacity: 0.8;
                    }
                }
            }
            
            .order-timeline {
                background: #f8f9fa;
                padding: 30rpx;
                
                .timeline-title {
                    color: #333;
                    font-size: 28rpx;
                    font-weight: 600;
                    display: block;
                    margin-bottom: 24rpx;
                }
                
                .timeline-content {
                    .timeline-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 16rpx 0;
                        border-bottom: 1rpx solid #e9ecef;
                        
                        &:last-child {
                            border-bottom: none;
                            padding-bottom: 0;
                        }
                        
                        &:first-child {
                            padding-top: 0;
                        }
                        
                        .timeline-action {
                            color: #333;
                            font-size: 26rpx;
                            flex: 1;
                        }
                        
                        .timeline-time {
                            color: #999;
                            font-size: 24rpx;
                            flex-shrink: 0;
                        }
                    }
                }
            }
        }
    }
    
    // 服务中订单列表样式
    .service-order-list {
        padding: 20rpx;
        
        .service-card {
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            padding: 30rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
            
            .service-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24rpx;
                
                .service-title {
                    flex: 1;
                    
                    .title-text {
                        color: #00bcd4;
                        font-size: 32rpx;
                        font-weight: 600;
                    }
                }
                
                .service-status {
                    background: #e1f5fe;
                    color: #00bcd4;
                    padding: 6rpx 16rpx;
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    font-weight: 500;
                }
            }
            
            .service-basic-info {
                margin-bottom: 30rpx;
                
                .info-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 16rpx;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                    
                    .info-label {
                        color: #666;
                        font-size: 26rpx;
                        margin: 0 12rpx 0 12rpx;
                        flex-shrink: 0;
                    }
                    
                    .info-text {
                        color: #333;
                        font-size: 26rpx;
                        flex: 1;
                        margin-left: 12rpx;
                        line-height: 1.4;
                    }
                    
                    .price-text {
                        color: #333;
                        font-size: 28rpx;
                        font-weight: 600;
                        margin-left: 12rpx;
                    }
                }
                
                .service-tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 12rpx;
                    margin-top: 20rpx;
                    
                    .service-tag {
                        padding: 6rpx 16rpx;
                        border-radius: 16rpx;
                        font-size: 24rpx;
                        font-weight: 500;
                        
                        &.urgent {
                            background: linear-gradient(135deg, #ffcc80, #ffb74d);
                            color: #e65100;
                        }
                        
                        &.vip {
                            background: linear-gradient(135deg, #e1bee7, #ce93d8);
                            color: #7b1fa2;
                        }
                    }
                }
            }
            
            .service-progress {
                margin-bottom: 30rpx;
                
                .progress-title {
                    color: #333;
                    font-size: 28rpx;
                    font-weight: 600;
                    margin-bottom: 20rpx;
                    display: block;
                }
                
                .progress-steps {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    position: relative;
                    
                    &::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 60rpx;
                        right: 60rpx;
                        height: 4rpx;
                        background: #e0e0e0;
                        transform: translateY(-50%);
                        z-index: 1;
                    }
                    
                    .progress-step {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        flex: 1;
                        position: relative;
                        z-index: 2;
                        
                        .step-icon {
                            width: 60rpx;
                            height: 60rpx;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 12rpx;
                            
                            .pending-dot {
                                width: 12rpx;
                                height: 12rpx;
                                border-radius: 50%;
                                background: #e0e0e0;
                            }
                        }
                        
                        .step-name {
                            color: #666;
                            font-size: 22rpx;
                            text-align: center;
                        }
                        
                        &.completed {
                            .step-icon {
                                background: #4caf50;
                            }
                            
                            .step-name {
                                color: #4caf50;
                                font-weight: 500;
                            }
                        }
                        
                        &.current {
                            .step-icon {
                                background: #00bcd4;
                            }
                            
                            .step-name {
                                color: #00bcd4;
                                font-weight: 600;
                            }
                        }
                        
                        &.pending {
                            .step-icon {
                                background: #f5f5f5;
                                border: 2rpx solid #e0e0e0;
                            }
                        }
                    }
                }
            }
            
            .service-actions {
                margin-bottom: 30rpx;
                
                .service-note {
                    width: 100%;
                    padding: 20rpx;
                    border: 1rpx solid #e0e0e0;
                    border-radius: 12rpx;
                    font-size: 26rpx;
                    color: #333;
                    margin-bottom: 20rpx;
                    background: #fafafa;
                    
                    &::placeholder {
                        color: #999;
                    }
                }
                
                .complete-service-btn {
                    width: 100%;
                    background: linear-gradient(135deg, #00bcd4, #2196f3);
                    color: #fff;
                    border: none;
                    border-radius: 50rpx;
                    padding: 24rpx 0;
                    font-size: 28rpx;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 12rpx;
                    
                    &:active {
                        opacity: 0.8;
                    }
                }
            }
            
            .customer-info {
                margin-bottom: 30rpx;
                
                .customer-title {
                    color: #333;
                    font-size: 28rpx;
                    font-weight: 600;
                    margin-bottom: 20rpx;
                    display: block;
                }
                
                .customer-detail {
                    .customer-profile {
                        display: flex;
                        align-items: center;
                        margin-bottom: 24rpx;
                        
                        .customer-avatar {
                            width: 80rpx;
                            height: 80rpx;
                            border-radius: 50%;
                            background: #f0f8ff;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-right: 20rpx;
                        }
                        
                        .customer-name-rating {
                            flex: 1;
                            
                            .customer-name {
                                color: #333;
                                font-size: 28rpx;
                                font-weight: 600;
                                display: block;
                                margin-bottom: 8rpx;
                            }
                            
                            .customer-rating {
                                display: flex;
                                align-items: center;
                                gap: 4rpx;
                                
                                .rating-text {
                                    color: #ffb400;
                                    font-size: 24rpx;
                                    font-weight: 600;
                                    margin-left: 8rpx;
                                }
                            }
                        }
                    }
                    
                    .customer-actions {
                        display: flex;
                        gap: 20rpx;
                        
                        .customer-action-btn {
                            flex: 1;
                            background: #f5f5f5;
                            color: #666;
                            border: 1rpx solid #e0e0e0;
                            border-radius: 12rpx;
                            padding: 20rpx 0;
                            font-size: 24rpx;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 8rpx;
                            
                            &:active {
                                background: #e8e8e8;
                            }
                        }
                    }
                }
            }
            
            .service-details {
                .details-title {
                    color: #333;
                    font-size: 28rpx;
                    font-weight: 600;
                    margin-bottom: 20rpx;
                    display: block;
                }
                
                .details-content {
                    .detail-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        margin-bottom: 16rpx;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        .detail-label {
                            color: #666;
                            font-size: 26rpx;
                            width: 140rpx;
                            flex-shrink: 0;
                        }
                        
                        .detail-value {
                            color: #333;
                            font-size: 26rpx;
                            flex: 1;
                            text-align: right;
                            line-height: 1.4;
                            
                            &.price {
                                color: #333;
                                font-weight: 600;
                                font-size: 28rpx;
                            }
                        }
                    }
                }
            }
        }
    }
    
    // 待预约订单列表样式
    .appointment-order-list {
        padding: 20rpx;
        
        .appointment-card {
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            padding: 30rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
            
            .appointment-header {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                margin-bottom: 24rpx;
                
                .service-title {
                    flex: 1;
                    
                    .title-text {
                        color: #00bcd4;
                        font-size: 32rpx;
                        font-weight: 600;
                        line-height: 1.3;
                    }
                }
                
                .deadline-text {
                    background: #fff3e0;
                    color: #ff9800;
                    padding: 6rpx 16rpx;
                    border-radius: 16rpx;
                    font-size: 24rpx;
                    font-weight: 500;
                    white-space: nowrap;
                    margin-left: 20rpx;
                    
                    &.urgent {
                        background: #ffebee;
                        color: #e91e63;
                    }
                }
            }
            
            .appointment-info {
                .info-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 16rpx;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                    
                    .info-label {
                        color: #666;
                        font-size: 26rpx;
                        margin: 0 12rpx 0 12rpx;
                        flex-shrink: 0;
                    }
                    
                    .info-text {
                        color: #333;
                        font-size: 26rpx;
                        flex: 1;
                        margin-left: 12rpx;
                        line-height: 1.4;
                    }
                    
                    .price-text {
                        color: #333;
                        font-size: 28rpx;
                        font-weight: 600;
                        margin-left: 12rpx;
                    }
                }
                
                .service-tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 12rpx;
                    margin-top: 20rpx;
                    
                    .service-tag {
                        padding: 6rpx 16rpx;
                        border-radius: 16rpx;
                        font-size: 24rpx;
                        font-weight: 500;
                        
                        &.urgent {
                            background: linear-gradient(135deg, #ffcc80, #ffb74d);
                            color: #e65100;
                        }
                        
                        &.new {
                            background: #e1f5fe;
                            color: #00bcd4;
                        }
                    }
                }
            }
            
            .appointment-actions {
                display: flex;
                gap: 20rpx;
                margin-top: 30rpx;
                padding-top: 24rpx;
                border-top: 1rpx solid #f0f0f0;
                
                .ignore-btn {
                    flex: 1;
                    background: #f5f5f5;
                    color: #666;
                    border: 1rpx solid #e0e0e0;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 28rpx;
                    
                    &:active {
                        background: #e8e8e8;
                    }
                }
                
                .appointment-btn {
                    flex: 2;
                    background: linear-gradient(135deg, #00bcd4, #2196f3);
                    color: #fff;
                    border: none;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 28rpx;
                    font-weight: 600;
                    
                    &:active {
                        opacity: 0.8;
                    }
                }
            }
        }
    }
    
    // 接单订单列表样式
    .taking-order-list {
        padding: 20rpx;
        
        .order-card {
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 24rpx;
            padding: 30rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
            
            .order-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24rpx;
                
                .service-title {
                    display: flex;
                    align-items: center;
                    
                    .title-text {
                        color: #333;
                        font-size: 32rpx;
                        font-weight: 600;
                        margin-right: 16rpx;
                    }
                    
                    .urgent-tag {
                        background: linear-gradient(135deg, #ff6b6b, #ff5252);
                        color: #fff;
                        padding: 4rpx 12rpx;
                        border-radius: 12rpx;
                        font-size: 22rpx;
                        
                        .urgent-text {
                            font-weight: 500;
                        }
                    }
                }
                
                .order-price {
                    display: flex;
                    align-items: baseline;
                    
                    .price-symbol {
                        color: #00bcd4;
                        font-size: 24rpx;
                        font-weight: 600;
                    }
                    
                    .price-amount {
                        color: #00bcd4;
                        font-size: 36rpx;
                        font-weight: 700;
                        margin-left: 2rpx;
                    }
                }
            }
            
            .order-info {
                .info-item {
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 16rpx;
                    
                    &:last-child {
                        margin-bottom: 0;
                    }
                    
                    .info-label {
                        color: #666;
                        font-size: 26rpx;
                        width: 140rpx;
                        flex-shrink: 0;
                        margin-right: 20rpx;
                        line-height: 1.4;
                    }
                    
                    .info-value {
                        color: #333;
                        font-size: 26rpx;
                        flex: 1;
                        line-height: 1.4;
                        
                        &.distance {
                            color: #00bcd4;
                            font-weight: 500;
                        }
                    }
                    
                    .time-info {
                        display: flex;
                        align-items: center;
                        
                        .time-date {
                            color: #333;
                            font-size: 26rpx;
                            padding: 4rpx 12rpx;
                            border-radius: 12rpx;
                            margin-right: 12rpx;
                            
                            &.today {
                                background: linear-gradient(135deg, #00bcd4, #2196f3);
                                color: #fff;
                                font-weight: 500;
                            }
                            
                            &.tomorrow {
                                background: #fff3e0;
                                color: #ff9800;
                                border: 1rpx solid #ffcc80;
                                font-weight: 500;
                            }
                        }
                        
                        .time-period {
                            color: #666;
                            font-size: 24rpx;
                        }
                    }
                    
                    .service-tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 8rpx;
                        
                        .service-tag {
                            background: #f0f8ff;
                            color: #00bcd4;
                            padding: 4rpx 12rpx;
                            border-radius: 12rpx;
                            font-size: 22rpx;
                            border: 1rpx solid #e1f5fe;
                        }
                    }
                }
            }
            
            .order-actions {
                display: flex;
                gap: 20rpx;
                margin-top: 30rpx;
                padding-top: 24rpx;
                border-top: 1rpx solid #f0f0f0;
                
                .ignore-btn {
                    flex: 1;
                    background: #f5f5f5;
                    color: #666;
                    border: 1rpx solid #e0e0e0;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 28rpx;
                    
                    &:active {
                        background: #e8e8e8;
                    }
                }
                
                .take-btn {
                    flex: 2;
                    background: linear-gradient(135deg, #00bcd4, #2196f3);
                    color: #fff;
                    border: none;
                    border-radius: 50rpx;
                    padding: 20rpx 0;
                    font-size: 28rpx;
                    font-weight: 600;
                    
                    &:active {
                        opacity: 0.8;
                    }
                }
            }
        }
        
        // 加载更多
        .load-more {
            text-align: center;
            padding: 20rpx;
            color: #999;
            font-size: 26rpx;
            
            &:active {
                color: #00bcd4;
            }
        }
        
        // 接单空状态
        .empty-taking-orders {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: calc(100vh - 500rpx);
            
            .empty-icon {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 40rpx;
                opacity: 0.6;
            }
            
            .empty-text {
                color: #333;
                font-size: 32rpx;
                font-weight: 500;
                margin-bottom: 16rpx;
            }
            
            .empty-desc {
                color: #999;
                font-size: 26rpx;
                text-align: center;
                line-height: 1.4;
            }
        }
    }
    
    // 接单空状态（保留原有的）
    .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 400rpx);
        
        .empty-content {
            text-align: center;
            
            .engineer-icon {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 40rpx;
            }
            
            .empty-text {
                color: #666;
                font-size: 28rpx;
                margin-bottom: 60rpx;
                display: block;
            }
            
            .join-btn {
                background: linear-gradient(90deg, #00bcd4 0%, #2196f3 100%);
                color: #fff;
                border: none;
                border-radius: 50rpx;
                padding: 24rpx 60rpx;
                font-size: 32rpx;
                font-weight: 500;
            }
        }
    }
    
    // 待预约空状态
    .appointment-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 500rpx);
        
        .empty-appointment {
            text-align: center;
            
            .appointment-icon {
                width: 160rpx;
                height: 160rpx;
                margin-bottom: 30rpx;
            }
            
            .empty-appointment-text {
                color: #333;
                font-size: 32rpx;
                font-weight: 500;
                margin-bottom: 20rpx;
                display: block;
            }
            
            .appointment-description {
                color: #999;
                font-size: 26rpx;
                line-height: 1.4;
                display: block;
                max-width: 500rpx;
                margin: 0 auto;
            }
        }
    }
    
    // 服务中空状态
    .service-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 500rpx);
        
        .empty-service {
            text-align: center;
            
            .service-icon {
                width: 160rpx;
                height: 160rpx;
                margin-bottom: 30rpx;
            }
            
            .empty-service-text {
                color: #999;
                font-size: 28rpx;
                display: block;
            }
        }
    }
    
    // 服务中订单列表
    .service-order-list {
        padding: 20rpx;
        
        .order-info-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            
            .future-orders {
                .future-text {
                    color: #333;
                    font-size: 28rpx;
                    font-weight: 500;
                }
            }
            
            .calendar-toggle {
                display: flex;
                align-items: center;
                padding: 16rpx 24rpx;
                background: #f5f5f5;
                border-radius: 8rpx;
                
                .calendar-text {
                    color: #666;
                    font-size: 26rpx;
                    margin-left: 8rpx;
                }
            }
        }
        
        .today-orders-header {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            
            .today-text {
                color: #999;
                font-size: 26rpx;
                margin-left: 12rpx;
            }
        }
        
        .empty-order-card {
            background: #fff;
            border-radius: 12rpx;
            padding: 60rpx 40rpx;
            text-align: center;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
            
            .empty-card-icon {
                width: 120rpx;
                height: 120rpx;
                margin-bottom: 20rpx;
            }
            
            .empty-card-text {
                color: #999;
                font-size: 26rpx;
                display: block;
            }
        }
    }
    
    // 完工/关闭空状态
    .completed-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 500rpx);
        
        .empty-completed {
            text-align: center;
            
            .completed-icon {
                width: 160rpx;
                height: 160rpx;
                margin-bottom: 30rpx;
            }
            
            .empty-completed-text {
                color: #999;
                font-size: 28rpx;
                display: block;
            }
        }
    }
    
    // 挂起单空状态
    .suspended-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 600rpx);
        
        .empty-suspended {
            text-align: center;
            
            .suspended-icon {
                width: 160rpx;
                height: 160rpx;
                margin-bottom: 30rpx;
            }
            
            .empty-suspended-text {
                color: #999;
                font-size: 28rpx;
                display: block;
            }
        }
    }
    
    // 其他空状态
    .general-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 400rpx);
        
        .empty-general {
            text-align: center;
            
            .general-icon {
                width: 160rpx;
                height: 160rpx;
                margin-bottom: 30rpx;
            }
            
            .empty-general-text {
                color: #999;
                font-size: 28rpx;
                display: block;
            }
        }
    }
}

.bottom-notice {
    background: linear-gradient(90deg, #00bcd4 0%, #2196f3 100%);
    color: #fff;
    padding: 24rpx 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
}

.bottom-nav-placeholder {
    height: 120rpx;
}

// 入驻弹窗样式
.join-modal {
    padding: 40rpx;
    
    .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40rpx;
        
        .modal-title {
            font-size: 36rpx;
            font-weight: 600;
            color: #333;
        }
    }
    
    .modal-content {
        .form-item {
            margin-bottom: 30rpx;
            
            .label {
                display: block;
                color: #333;
                font-size: 28rpx;
                margin-bottom: 16rpx;
            }
            
            .input, .textarea {
                width: 100%;
                padding: 24rpx;
                border: 2rpx solid #e5e5e5;
                border-radius: 12rpx;
                font-size: 28rpx;
                color: #333;
                
                &::placeholder {
                    color: #999;
                }
            }
            
            .textarea {
                height: 120rpx;
                resize: none;
            }
            
            .region-select {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 24rpx;
                border: 2rpx solid #e5e5e5;
                border-radius: 12rpx;
                
                .placeholder {
                    color: #999;
                }
            }
        }
    }
    
    .modal-footer {
        margin-top: 40rpx;
        
        .submit-btn {
            width: 100%;
            background: linear-gradient(90deg, #00bcd4 0%, #2196f3 100%);
            color: #fff;
            border: none;
            border-radius: 50rpx;
            padding: 28rpx;
            font-size: 32rpx;
            font-weight: 500;
            margin-bottom: 20rpx;
        }
        
        .agreement {
            text-align: center;
            font-size: 24rpx;
            color: #666;
            
            .link {
                color: #00bcd4;
                text-decoration: underline;
            }
        }
    }
}

// 确认收款弹窗样式
.confirm-payment-modal {
    padding: 40rpx;
    
    .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40rpx;
        
        .modal-title {
            font-size: 36rpx;
            font-weight: 600;
            color: #333;
        }
    }
    
    .modal-content {
        .form-item {
            margin-bottom: 30rpx;
            
            .label {
                display: block;
                color: #333;
                font-size: 28rpx;
                margin-bottom: 16rpx;
            }
            
            .order-amount {
                display: block;
                color: #ff6b35;
                font-size: 36rpx;
                font-weight: 700;
                text-align: center;
                margin: 20rpx 0;
            }
            
            .input {
                width: 100%;
                padding: 24rpx;
                border: 2rpx solid #e5e5e5;
                border-radius: 12rpx;
                font-size: 28rpx;
                color: #333;
                
                &::placeholder {
                    color: #999;
                }
            }
            
            .description {
                display: block;
                color: #999;
                font-size: 24rpx;
                text-align: center;
            }
        }
    }
    
    .modal-footer {
        margin-top: 40rpx;
        display: flex;
        gap: 20rpx;
        
        .cancel-btn, .confirm-btn {
            flex: 1;
            border-radius: 50rpx;
            padding: 28rpx;
            font-size: 32rpx;
            font-weight: 500;
        }
        
        .cancel-btn {
            background: #f5f5f5;
            color: #666;
            border: 1rpx solid #e0e0e0;
        }
        
        .confirm-btn {
            background: linear-gradient(90deg, #00bcd4 0%, #2196f3 100%);
            color: #fff;
            border: none;
        }
    }
}


</style>
